Introduction

Welcome to this tutorial where we will discuss how to update data in another class in ReactJS. But before we dive into the main topic, let's first understand what ReactJS is.

ReactJS is a JavaScript library used in web development to build interactive elements on websites. It's like the blocks you used in your childhood to build houses, cars, and whatnot. But instead of plastic blocks, you use ReactJS to build web applications.

Fundamental Concepts

Before discussing how to update data from another class, it is crucial to understand two fundamental concepts in ReactJS - Components and State.

Components

In ReactJS, components are the building blocks. Just like how you arrange and combine different Lego pieces to create a unique structure, you build a React application by composing these components. Each component is a piece of the UI (User Interface) that you can reuse in different parts of your project.

Here's a simple example of a React component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

In this example, Welcome is a React component that accepts a prop (short for properties) named name and renders it inside a heading (h1) HTML tag.

State

State, on the other hand, is like a container that holds data that can change over time. It's like a backpack you carry around. What's inside the backpack can change based on what you need. In our case, the backpack is the component, and the things inside it are the state.

Here's how you can define a state inside a React component:

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John Doe' };
  }

  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

In this example, the Welcome component has a state that contains a name property with the value 'John Doe'.

Updating State in Another Component

Now, let's get to the meat of the tutorial. How can we update the state of another component?

To do this, we need to use a concept called "lifting state up".

Lifting State Up

Imagine you and a friend are carrying a heavy box. Alone, it's hard to move the box around, but when one of you lifts one side of the box and the other lifts the opposite side, you can move the box more efficiently.

In React, "lifting state up" is similar to this analogy. If two components need to share and manipulate the same data, we lift the state up to their closest common ancestor.

Let's look at an example where we have two components: Parent and Child.

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John Doe' };
  }

  render() {
    return <Child />;
  }
}

class Child extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

In this example, the Child component tries to display the name from its props, but it doesn't receive it from the Parent component. Thus, it can't display the name. Let's lift the state up to fix this.

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John Doe' };
  }

  render() {
    return <Child name={this.state.name} />;
  }
}

class Child extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Now, the Parent component passes its state (name) as a prop to the Child component. Thus, the Child component can display the name.

Updating the State

But what if we want to change the state from the Child component? To do this, the Parent component needs to provide a function that changes its state, and the Child component needs to call this function when necessary.

Here's how we can do it:

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John Doe' };

    this.changeName = this.changeName.bind(this);
  }

  changeName(newName) {
    this.setState({ name: newName });
  }

  render() {
    return <Child name={this.state.name} changeName={this.changeName} />;
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.changeName('Jane Doe');
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <button onClick={this.handleClick}>Change Name</button>
      </div>
    );
  }
}

In this example, the Parent component passes the changeName function as a prop to the Child component. When the button in the Child component is clicked, it calls the changeName function, which changes the name in the Parent component's state.

Conclusion

And that's it! You now know how to update the state of a component from another component in ReactJS. It might seem a little confusing at first, but once you get the hang of it, it's quite straightforward. Remember, practice makes perfect. So, keep practicing and building with React. Keep learning and happy coding!