Section 04: User Interaction & State - Making Apps Interactive & Reactive

The goals

💪🏻Handling Events

✌🏻Updating the UI & Working with "State"

👍🏻A Closer Look At Components & States

 

Define function first, and then connect it to the button to make a use of it!

 

How React works?

React reads all file first and renders. Sometimes we would like to change the looking of page wtih triggering action but React once it renders, doesn't read the file again to change. So in this case, we can use 'State' to change the state of our page! So we can make more reactive webpage!

 

For example, if we wanna update the title of item as 'Updated!' we can't just do it with '='.

In this case, we use 'state'. 

It has two values, the one is itself and the other is updating function!

So we use the updating function whenever we wanna update the value and use the value whenever we wanna use the State value, like here for outputting it in the JSX code.  

So it triggers the action for React to read our file again and evaluate again and finally update again.

 

We can get the user input value like this.

 

+ We can have multiple states in one component.

const titleChangeHandler = (event) => {  
  setUserInput ((prevState) => {
   return {...prevState, enteredTitle: event.target.value };
  });
};

So we should use this function syntax here whenever our state update depends on the previous state.

 

Event.preventDefault()

This is not only for React, it's default JavaScript behaviour.

We can prevent the default of this request being sent.

 

 

Two-way binding

So we can bind the value for this input.

It's really useful especially when we work with form!

 

We do this to use child data in parent component or pass it down to another child component.