score:1
Accepted answer
you cannot change the props directly, either you call a parent function to change the props that are passed to your component or in your local copy that you createm you can change them. shouldcomponentupdate
is only called when a state has changed either directly or from the props, you are not doing any of that, only modifying the local copy and hence no change is triggered
do something like
var reactdom = require('react-dom');
var react = require('react');
class button extends react.component {
constructor(props) {
super(props);
console.log(props);
this.state = {options = props.options};
}
componentwillrecieveprops(nextprops) {
if(nextprops.options !== this.props.options) {
this.setstate({options: nextprops.options})
}
}
componentwillmount () {
var defaultfeatureoptionid = this.props.feature.defaultfeatureoptionid;
var options = [...this.state.options]
options.foreach((option) => {
var classes = "";
if (option.description.length > 10) {
classes = "option-button big-button hidden";
} else {
classes = "option-button small-button hidden";
}
if (option.id === defaultfeatureoptionid) {
classes = classes.replace("hidden", " selected");
option.selected = true;
}
option.class = classes;
});
this.setstate({options})
}
shouldcomponentupdate(props) {
console.log("update");
}
toggledropdown(index) {
var options = [...this.state.options];
var options = options[index];
option.selected = !option.selected;
options.foreach((opt) => {
if (option.id !== opt.id) {
opt.class = opt.class.replace("hidden", "");
}
else if(option.id === opt.id && option.selected) {
opt.class = opt.class.replace("", "selected");
}
});
this.setstate({options})
}
render() {
if (this.state.options) {
return (<div> {
this.state.options.map((option, index) => {
return <div classname={ option.class } key={option.id}>
<div> {option.description}</div>
<img classname="option-image" src={option.imageurl}></img>
<i classname="fa fa-chevron-down" aria-hidden="true" onclick={() => this.toggledropdown(index) }></i>
</div>
})
}
</div>
)
}
else {
return <div>no options defined</div>
}
}
}
module.exports = button;
Source: stackoverflow.com
Related Query
- React functional component doesnt rerender when changing props passed as an array
- React doesnt rerender component when props value is being change
- react doesn't rerender component when props changed
- Rerender React component when props change?
- React doesn't rerender component when props change
- React Component doesn't rerender when the state is changed
- React component not updating when store state has changed
- react / functional component / props changed / getDerivedStateFromProps
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Does a React component deeply compare props to check if rerender is needed?
- React memo keeps rendering when props have not changed
- Component not updating when I change the props that I pass to it in React
- How to stop re render child component when any state changed in react js?
- React props destructuring when passing to component
- How can I spread props to a React component that uses exact props when using Flow?
- WebStorm highlights React component when props passed through react-redux connect function
- Why is React component rerendering when props has not changed?
- React component not rerendering when props changes
- Component does not rerender but redux state has changed via react hooks
- I want rerender when props data change with react hooks but i got infinite rerender
- React component props not changing when they should?
- Make a React component rerender when data class property change
- React - change state when props are changed
- Passing both match param and props into react component when using routing
- How to render React (with Redux) component only when props are received?
- Why doesn't go my props to child component when I changed my props in Main Component?
- Component is not re rendering when state is changed in react
- How to conditionally pass optional props to component when we use React with Typescript?
- How to know if props have changed when using React.memo() with a functional Component
- Typescript isn't complaining when a React Functional Component (React.FC<Props>) with wrong props is send as a prop?
More Query from same tag
- React router dom does not render a page
- Start a setTimeout in componentDidMount and end it in componentWillUnmount in React
- react web dev server not detecting changes to sass files live
- react Firestore query nested collection where field then update, or add new doc
- Highcharts don't export custom SVG elements added after created
- React redux using state within an action creator
- React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack
- Issues showing Firebase array object in react JS
- React count down error
- How to solve more than one copy of react in a custom component library
- Why do I have to use "require" instead of "import from" for an image in React?
- How to map multiple subdomains to single instance of MERN Multi tenant app?
- I create a build of my react app and connected with electron.js. now how to connect my backend from server folder with electron
- Array key does not get interpolated when making object
- React - how to open modal when user tries to reload or close window/tab?
- How to update state using setInterval on functional components in React
- Unable to add multiple AsyncTypeahead in single page
- @material-ui/Icons error: Objects are not valid as a React child
- React Docs - origin of "serverRequest"
- Console.log('Dynamic page') logging twice in NextJs
- Redux store is not updated during integration test
- How can I use isForwardRef correctly in reactjs?
- I get "no such method" when using ES6 static functions
- File structure and scripts for deploying next js app to netlify
- ReactJS + Redux: How to directly navigate to a page (skip login) if token is in local storage?
- React Icons - pull icon dynamically
- What is the best way to make certain text in a paragraph prop bold in react?
- Electron is not defined
- How to render an object with keys?
- Sending svg as a prop gets rendered as [object Object]