I just started learning React and JavaScript.
While going through the tutorial, I got to this example code of a component, which creates a toggle button.
This is part of the code:
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({ // prevState?
isToggleOn: !prevState.isToggleOn
}));
}
2 things that are bugging me here:
prevState argument come from?var prevState = this.state; before calling it, and still, it works.arg => { statement; } syntax work here?Sorry for the newbie questions...
prevState is provided by React along with props, both of which are optional.
prevState to updater. The callback function still takes two arguments; the state and props at the time the change is being applied.The parenthesis allow multiple lines where if you didn't use the parenthesis you'd be forced to used a return. You could use a single line but you don't need the curly braces.
return statement you must wrap it in parenthesis. Thank you @joedotnot for catching that. So () => {foo: true} will throw an error because it looks like a function and foo: true is an invalid line. To fix this it must look like () => ({ foo: true })Im use this. (Example)
const [modal, setModal] = useState(false);
const [dataAction, setDataAction] = useState({name: '', description: ''});
const _handleChangeName = (data) => {
if(data.name)
setDataAction( prevState => ({ ...prevState, name : data.name }));
if(data.description)
setDataAction( prevState => ({ ...prevState, description : data.description }));
};