The handleChange property is a custom react property? What is this event parameter that I’m not passing but the function is receiving ? Can I just create my own custom properties just like this? Please, explain to me what is happening under the hood!
Thanks for the help and sorry if there are any weird parts in my questions, I’m not very proficient in English.
I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
if you look at this line in the render area which creates a input line and then invokes the function this.handleChange whenever someone changes anything in the input area (add/delete). This part is the ‘react’ part. but the actual function being called can be anything (any function name that handles the input).
I am still learning React myself, but the general idea is you want to pass down all the handlers from your main component, so everything is centrally located. Also, you only want to modify state (if possible) in your main component. It just makes code organization better and certain logic centralized. You only “pass down” what the children components need.
Of course there will be exceptions to this rule when a child component will need to update a sibling of the same parent. In this case, the parent passes a callback to the children and each child would trigger that callback when it’s state changes. See below for how siblings can communicate using only React (no Redux).
A more experienced React user will probably give a much better answer than I just did.
Randell, can you please explain how the event object is being passed to the handleChange function? I’m a bit confused since I doesn’t see the function being called nor this parameter passed. Thanks in advance.
Hi, just wanted to show you how the onChange event triggers the code for handleChange
It is done in the code section above. ‘onChange’ is a synthetic event that React gives us and we tell it what to do by assigning the related handler… (the related handler can be called anything we like but the synthetic event name is fixed)
As @hbar1st points out, it is the onChange event where the event object gets passed to the handleChange method. This is just “normal” event handler behavior regardless of using React.
I say “normal” above, because React does change the way the normal onchange event works. Normally, the onchange event only triggers once a change is made to the textbox and the textbox is exited. React’s onChange triggers for any change to the actual value property of the textbox even before being exited.