score:2
Accepted answer
finally, i solve this problem.
maybe this is because setstate
function operates asynchronously.
i fixed my code like this and working well.
export default class analyslinechart extends component {
constructor(props){
super(props);
this.selectbar = this.selectbar.bind(this);
this.state = {
labels: []
}
}
selectbar(event) {
//do something......
}
componentdidmount(){
this.setstate({
labels: this.props.selectablefields
});
}
render() {
return (
<linechart width={300} height={250} data={this.props.data}>
<xaxis datakey="date"/>
<yaxis/>
<legend onclick={this.selectbar} />
{
this.state.labels.map((label, index) => (
<line key={index} type="monotone" datakey={label.key} stroke={label.color} />
))
}
</linechart>
);
}
}
score:0
i don't think you are describing your issue clearly enough.
normally what you'd do is what you did which is mapping this.props.selectablefields
because saving that prop into state seems like an overkill.....
what is it exactly that you want to achieve when the legend component is clicked on?
Source: stackoverflow.com
Related Query
- React Hooks: how to wait for the data to be fetched before rendering
- How to initialize data before rendering in React.js
- How to preload data before rendering react app
- How can I prevent a component from rendering before data is loaded?
- How do I stop a component rendering before data is fetched?
- best place to fetch data before rendering in react
- How to fetch data in react server side rendering based on dynamic routing path
- Using redux, how to avoid rendering old state data before making a new API call?
- How to use useNavigate() before rendering component with useState() in React
- How can I make sure a React parent component loads data before its child component mounts?
- How to wait for FETCH before rendering DATA in Functional Component?
- How to do Server Side Rendering in React With React Loadable and Fetching Data for Components (Like Next.js)?
- How can I make an axios get request wait before rendering my react component
- Rendering happening before data loads - React Redux
- React Server Side Rendering App - how to update meta data
- React is rendering before api data arrived
- How to reset data in UseEffect React Hooks before each rendering?
- How to save previous state/ page data before going to another page in React JS
- How to render default image before rendering the actual image in react js?
- react rendering before database data is retrieved
- When testing a React component that renders fetched API data, how best to wait for that data before making any assertions?
- React App Rendering Before Firestore Data Has Loaded
- React not getting data before rendering
- How to make sure data has been loaded through AJAX before rendering a ReactJS component?
- React component rendering before data received from localStorage
- How can I fetch data in server before render in react isomorphic app?
- With a React Hooks' setter, how can I set data before the component renders?
- React : How to make sure that requested data are available before rendering?
- React - Get data before rendering pages
- How to retrieve a data from API or Firebase before rendering anything to the user in React?
More Query from same tag
- Not able to change tabs in react
- Validating React-Bootstrap-Typeahead input
- React JS: Loop through a multi-dimensional array and determine/load the correct component
- Where do I add functions in React?
- State not updating on removing value from array in React JSX funcntional component
- How to return text input into React component
- React setState not merging all changes
- Get DOM node of wrapped component in a higher order component (HOC)?
- React Auth Router v6
- How to fix / clear react-select while using formik?
- I have created a simple node server with CORS enabled. But when I do node server.js, it's throwing error
- How come in Postman my post request works but not in the browser even though I'm doing the same?
- Get body content from custom react component
- when using props in styled component it works well but shows warning (Warning: Received `true` for a non-boolean attribute `cen` )
- Redux action throwing "TypeError: Cannot read property 'num_of_players' of undefined" in mapStateToProps function
- Visual Studio Code [eslint] Delete 'CR' [prettier/prettier] on windows
- Unnecessary deleting elements from dom without making an action on this elements
- ReactJS component state change rendered but then immediately revert back to initial state
- NextJS + Apollo: How to get multiple queries on apolloClient.query inside getServerSideProps?
- React state always one step behind when getting cookie
- How can i delete key from the object?
- Getting "The prop A is marked as required in B, but its value is 'undefined'." even when it's not set as required
- React, conditional rendering inside map method
- how do i add a key-value pair to an object in state of functional components
- Trying to make a wrapper to handle some repetitive code in React; how to use arguments?
- How to pass values to another component in the routes?
- TypeScript React.FC<Props> confusion
- How to change the text color and background color of ant-tooltip component
- react-router-dom doesn't work for my project
- Better way to plot lines dynamically with React