Job Search Update — React State

Not much to update this week, same bad luck on the job front with no new contacts from the people I have reached out to. I do have an appointment with my career coach next week so hopefully I can get some new tips to work on.

For the technical portion of this blog we will talk about State in React apps! State is very important for React apps that have even a little complexity to them. The state is a JavaScript object that represents information about the components current situation and React uses it to observe any changes made to help the component react as intended. While props help pass data to other components, state is used to manage the data within the component. State is used along with props to create a dynamic and reactive webapp in React!

To add state to your component, simply add this into your code, typically at the top of the class:

class Login extends Component {

  state = {
    username: '',
    email: '',
    password: ''
  }
...
}

In this example, the state is used to store information about the user as they log into the app. I can use a change handling function to set the state to whatever the user types into the inputs:

handleChange = (e) => {
    const {name, value} = e.target
    this.setState({
      [name]: value
    })
  };

So by the time the user is done typing out their name, email, and password, the state has stored all the proper information. With this in hand, I can add a submit handling function that will take the information from the state as well as props from a different component, and successfully authenticate the user, signing them in if the information matches:

handleSubmit = (e) => {
    e.preventDefault()
    this.props.signin(this.state)
  }

When you have many components on an ever evolving project, it is a good idea to use Redux, which creates a ‘global store’ to store all the many states of your different components, we can talk more in-depth about Redux in another blog.