React with Semantic TextArea not updating value when props updated - reactjs

Question

I've this class which is a specific entry in a list.
I am trying to use the semantic-ui-react TextArea as a controlled component.
When an external event (changing the selected language) triggers the componentWillReceiveProps method, my data object in state is updated with the new data.
However the rendered value of the TextArea, which is set to this.state.value, is never changed.
I've verified that the state is in fact the new value, but I do not understand why the rendered value does not change.
import React, { Component } from "react";
import { Segment, Grid, Button, TextArea, Form } from 'semantic-ui-react'
const UNAVAILABLE = "Translation unavailable."
class Key extends Component {
constructor(props) {
super(props)
this.state = {
data: props.data[props.language]
}
}
componentWillReceiveProps = (props) => {
this.setState({
data: props.data[props.language]
})
}
handleEdit = (event) => {
this.setState({data: event.target.value})
this.props.edit(event.target.value)
}
render = () => {
let inverted = null;
let color = null;
if(this.props.hasChanged()){
inverted = true;
color = 'green'
} else if(!this.props.data[this.props.language]) {
inverted = true;
color = 'red'
}
return(
<Segment className='key' inverted={inverted} color={color}>
<Grid columns='equal' textAlign='left'>
<Grid.Row>
<Grid.Column className='keyField' width={3}>
{this.props.name}
</Grid.Column>
<Grid.Column width={5}>
{this.props.data.en}
</Grid.Column>
<Grid.Column width={5}>
<Form>
<TextArea
value={this.state.data}
placeholder={UNAVAILABLE}
onChange={this.handleEdit}>
</TextArea>
</Form>
</Grid.Column>
<Grid.Column>
<Button
className='button'
floated='right'
icon='trash alternate'
compact
onClick={this.props.delete}
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
)
}
}
export default Key;
SOLUTION: The real problem was my data object has values of data[language] that end up being undefined. I was expecting it to take a null value and go back to the placeholder, but apparently when you give null to the value field of a textArea that has a value it does nothing, as shown in github.com/facebook/react/issues/2533. Adding a check whether the property was in the data object and using an empty string instead fixed my issue.

Answer 1

You can verify its working for me
import React, { Component } from "react";
import { Segment, Grid, Button, TextArea, Form } from 'semantic-ui-react'
class AboutPage extends React.Component {
constructor(){
super();
this.state={
data:"initial data"
}
}
componentDidMount(){
setTimeout(()=>{
this.setState({data: 'new Data'})
}, 5000)
}
render() {
return (
<div>
<h1>About</h1>
<Key data={this.state.data}/>
</div>
);
}
}
const UNAVAILABLE = "Translation unavailable."
class Key extends Component {
constructor(props) {
super(props)
this.state = {
data: props.data
}
}
componentWillReceiveProps = (props) => {
this.setState({
data: props.data
})
}
handleEdit = (event) => {
this.setState({data: event.target.value})
// this.props.edit(event.target.value)
}
render = () => {
let inverted = null;
let color = null;
if(true){
inverted = true;
color = 'green'
} else if(!this.props.data[this.props.language]) {
inverted = true;
color = 'red'
}
return(
<Segment className='key' inverted={inverted} color={color}>
<Grid columns='equal' textAlign='left'>
<Grid.Row>
<Grid.Column className='keyField' width={3}>
{'name'}
</Grid.Column>
<Grid.Column width={5}>
{'English'}
</Grid.Column>
<Grid.Column width={5}>
<Form>
<TextArea
value={this.state.data}
placeholder={UNAVAILABLE}
onChange={this.handleEdit}>
</TextArea>
</Form>
</Grid.Column>
<Grid.Column>
<Button
className='button'
floated='right'
icon='trash alternate'
compact
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
)
}
}
export default AboutPage;