How can I get started with functional programming using react?

Question

I have a controlled component which updates inputs, using functional programming, I want to know if I need do this:

class ScreensEditSeries extends Component{
constructor(props){
    super(props)  
    this.state = {
        id: '',
        name: '',
        status: '',
        genre: '',
        notes: ''
    }
}
...
handleChange = field => event => {
    this.setState({
        ...this.state,   //is necessary do this for return a new full state?
        [field] : event.target.value
    })
}
...
render(){
return(
...
                        Name: <input type="text" value={this.state.name} onChange={this.handleChange('name')} className="form-control" /><br />
                        Status: {<span>&nbsp;</span>} 
                        <select value={this.state.status} onChange={this.handleChange('status')}>
                            {Object.keys(statsuser)
                                .map( key => <option key={key}>{statsuser[key]}</option>)}
                        </select><br/><br/>
                        Genre: {<span>&nbsp;</span>} 
                        <select value={this.state.genre} onChange={this.handleChange('genre')}>
                            {Object.keys(statsgenre)
                                .map(key => <option key={key}>{statsgenre[key]}</option>)}
                        </select><br/><br/>
                        Notes: <textarea type='text' value={this.state.notes} onChange={this.handleChange('notes')} className="form-control"></textarea><br />
...
)}

I am learning functional programming, and I think it's necessary to spread the state before updating to generate a new state, and not just update it. But this requires more memory and cpu process. Is it recommend to do that?

No it isnt. You can update only the key you need, react will keep the other keys unchanged. — Gbacc
– Gbacc, Commented Jan 8, 2019 at 14:33
"i want to know if i need do this": What happens when you don't do it? This is something you can easily work out. — Andy
– Andy, Commented Jan 8, 2019 at 14:33
@Andy, i know how to only change the key I need, and I know it works normally without doing as I showed in the example. The question I asked is about functional programming, which says that the object should not be changed, so what I did was to return a new state. — Jose Alves
– Jose Alves, Commented Jan 8, 2019 at 19:51

Treycos · Accepted Answer · 2019-01-08 14:32:59Z

2

No, this is not necessary, setState will only modify the variables given in the JSON you provide. In your case, only the field value's attribute will be modified.

Deconstructing your state isn't needed unless you want to modify a nested property.

answered Jan 8, 2019 at 14:32

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jose Alves Over a year ago

Thanks man, my question was about immutability of data, and when we do setState(), we are changing the object, and the right thing would be to return a new object. But I think as I did in the example above, the state continues to mutate. My intention was to return a new state, as a copy of the old one, but now with attributes of different values. In the functional programming view, would giving a setState () attribute be wrong?

Collectives™ on Stack Overflow

How can I get started with functional programming using react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related