There is a parent component

<TagsSelect name="Tags" value={this.state.tags} onChange={this.onFormChange} />

Inside it is another component

 class TagsSelect extends React.Component { render() { const colors = ['orange', 'red', 'blue', 'purple']; return ( <Multiselect value={this.props.value} data={colors} onChange={value => this.props.value = value} /> ); } }

An error occurs

Uncaught TypeError: Cannot assign property to read only property 'value' of object '#'

on the line this.props.value = value;

The question is how to return to the value of the parent element what is returned in value in onChange

  • 2
    The state of the component must be stored in the state , and not in the props . Either save to some storage external to the component and lower it to the component via props . - Nofate ♦
  • one
    you pass the function, to the function value, in the top-level component the method will work, assign the value. - Vasily Barbashev

1 answer 1

 class TagsSelect extends React.Component { render() { const colors = ['orange', 'red', 'blue', 'purple']; onChangeHandler(val) { let value = val this.setState({value}); } return ( <Multiselect onChangeHandlerFunc={this.onChangeHandler} data={colors} onChange={value => this.props.onChangeHandlerFunc(value)} /> ); } }
  • 2
    Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦