Here is the list which I am trying to display
<li key={data.url} onClick={this.props.history.push('/viewnetworkaccount')}>
{data.keyName}
</li>
I want to push data.url. How To do so.
You can do this way,
<li key={data.url} onClick={() => this.props.history.push('/viewnetworkaccount')}>
{data.keyName}
</li>
Also make sure you wrap your component using withRouter HOC.
Related
I am working on an app that requires a modal component, this component is currently encompassed with three props that are passed to callback three different modals in the app structure. What I need to achieve is when a button is clicked for the specific modal, add a unique class to the modal wrapper that will identify each modal when clicked, thus manipulating the css with selectors for those modals.
see below:
const NWmodal = (props) => {
return (
<Modal>
<Modalmain data-modal-type="this should pass in a unique id to its modal once button is clicked">
<div>
{props.ejectModal}
</div>
<div>
{props.timeModal}
</div>
<div>
{props.leaveModal}
</div>
<Close>
x
</Close>
</Modalmain>
</Modal>
);
}
<NWmodal
id="timeModal"
timeModal={<NWtimeModal/>} (callback for timemodal component)
/>
<NWmodal
id="leaveModal"
leaveModal={<NWleaveModal/>} (callback for leavemodal component)
/>
<NWmodal
id="ejectModal"
leaveModal={<NWejectModal/>} (callback for ejectmodal component)
/>
function Nav() {
return (
<ul>
<li>
<button
href="javascript:void(0)"
data-modal="timeModal"
onClick={event}>
Time Modal
</button>
</li>
<li>
<button
href="javascript:void(0)"
data-modal="leaveModal"
onClick={event}>
Leave Modal
</button>
</li>
<li>
<button
href="javascript:void(0)"
data-modal="ejectModal"
onClick={event}>
Eject Modal
</button>
</li>
</ul>
);
}
As a disclaimer: I'm still learning this React thing, but the approach I would likely take...
The useRef hook can be used to create variables, which may then in turn be associated with your modals as a reference. eg:
const ejectModalRef = useRef()
<NWmodal id="ejectModal" ref={ejectModalRef} />
The node will be accessible in the onClick JS code as 'ejectModalRef.current'.
(Don't forget to import useRef eg.: import React, { useRef } from "react";
HTH
I have navigation in my React app. However I would like the colour of navigation to change if on that page.
Heres my code Ive added an active className to the items.
<Link to='/'>
<li className='menu-list-item menu-list-logo active'>Gatsby's</li>
</Link>
<Link to='/drink'>
<li className='menu-list-item active'>Drink</li>
</Link>
<Link to='/food'>
<li className='menu-list-item active'>Food</li>
</Link>
<Link to='contact'>
<li className='menu-list-item active'>Contact</li>
</Link>
The navigation links currently have a background of black. I want the colour to change to lets say red.
P.S I'm using standard CSS for styles.
There is actually a property of activeClassName in NavLink of react router.
It goes like this
Import { NavLink } from 'react-router-dom`
...
<NavLink exact activeClassName="your_active_css_classname" className="normal_css">Link name </NavLink>
Don't forget to add exact. Read more here: https://reacttraining.com/react-router/web/api/NavLink
Light/Fast way to do this would be to change the class at the parent DOM element of these <Link> elements... from there the CSS would do what it works best.
Assuming these <Link> ... </Link> tags are enclosed inside a <nav> ... </nav> tag, which is the parent DOM element.
{ (onThePage) ? <nav className="onThePageClass"> ... </nav> : <nav className="normalClass"> ... </nav> }
Try this else share MVCE if you get stuck so that it serves as a good example for others looking for help
I am using ReactJS with JSX and materializeCss for styling.
I am facing this problem for a couple of days now...
In short what I have:
class PreventiveCollection extends Component {
componentDidUpdate = () => updateDropdowns(); // which stands for initializing materialize dropdowns
render() {
const myList = this.props.data.map( (i ,index) => (
<li key={index} className="collection-item">
<i data-target={i.id} className="dropdown-trigger material-icons right">more_vert</i>
<ul id={i.id} className='dropdown-content'>
<li><a>option 1</a></li>
<li><a>option 2</li>
</ul>
</li>
));
return <div>{myList}</div>
}
}
I am rendering a collection of items, where each item has a dropdown menu. The problem is that when I click "more_vert" button, the dropdown opens on the top of the component, right below the first menu button.
They all work and are connected with each item correctly. The problem is only the position. Please see attached screen
https://i.stack.imgur.com/PFfV4.png
On the left screen, the top menu-button was clicked, it's all fine.
On the right screen, the 3rd item menu-button was clicked. The dropdown content is fine, but the position is wrong. it always sticks to this first menu button...
I have tried:
move the menu to separate component with its own update state functions
moved updateDropdowns() from componentDidUpdate to the end of the
render() method.
wrap menus objects with divs with mix of position relative/absolute
none of the above worked.
The problem was related to MaterialCss and the first relative parent. The solution is to wrap full menu code with div with position relative, like so:
class PreventiveCollection extends Component {
componentDidUpdate = () => updateDropdowns(); // which stands for initializing materialize dropdowns
render() {
const myList = this.props.data.map( (i ,index) => (
<li key={index} className="collection-item">
<div style={{position: 'relative'}}>
<i data-target={i.id} className="dropdown-trigger material-icons right">more_vert</i>
<ul id={i.id} className='dropdown-content'>
<li><a>option 1</a></li>
<li><a>option 2</li>
</ul>
</div>
</li>
));
return <div>{myList}</div>
}
}
I'm newbie. And I'm newbie at React. I'm trying react-router. I saw this example: https://reacttraining.com/react-router/web/example/basic.
I reproduced it on Codesandbox.io here: https://codesandbox.io/s/7jxq0j6qp0
I don't understand why the Menu is re-rendering itself when I change URL using menu's links.
If you open console you can see it.
Why?
I think it should not re-render itself. Just the route section. Where am I wrong?
You can write your component as PureComponent. Since there is no prop changes right now it won't be re-rendered:
class Menu extends React.PureComponent {
render() {
console.log("Menu render() - ", Date.now());
return (
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
</div>
);
}
}
But, please be aware of the negative sides of this method for other use cases: Dealing with Update Blocking
I am writing the following redux component (dumb)
const TopMenuComponent = () => (
<div className={styles.topMenuIndex}>
<header role="banner">
<nav role='navigation'>
<ul>
<li className={styles.expando}>☰</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
);
Now on the click event of the ☰ link I want to write some code to perform some function. I have two questions around this
Is it possible to do this without deriving this from the React.Component class using the above code. My concern is that this is a dumb component and if we derive this from React.Component then we are adding more intelligence into this.
Should this expansion click trigger a stage change on the redux store? This is just a simple expansion of a bunch of links thats all
If you want to make it a dumb component, then you can pass in a property, e.g. isOpen, which defines if the menu is expanded or not, and a function, e.g. handleClick, which should be called on a button click. This way, the state can be managed by a parent component.
Now whether you manage this state in the internal state of parent component or with your redux store is entirely up to you. You should choose redux if you will need to open and close the menu remotely.
There are two ways to achieve what you want to without affecting the redux store
First, Passing function as a prop to the component from the parent component and then calling this onClick
const TopMenuComponent = (props) => {
return (
<div className={styles.topMenuIndex}>
<header role="banner">
<nav role='navigation'>
<ul>
<li className={styles.expando} onClick={props.myhandler}>☰</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
)
};
Second way is to define a onClick handler in the component itsef like
const TopMenuComponent = () => {
const myHandler = (e) => {console.log('clicked'); // some other code}
return (
<div className={styles.topMenuIndex}>
<header role="banner">
<nav role='navigation'>
<ul>
<li className={styles.expando} onClick={myhandler}>☰</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
)
};