React is built on the foundation of truly reusable and encapsulated components, that are also meant to be self-managing. This means that the data update mechanism should be an internal detail of every component.

Have a look at the given React app:

- The `greetings` function:
  - **Line 5:** Takes in an object `target`.
  - **Line 6:** Extracts `value` from it.
  - **Line 12, 16-19:** Renders a greeting message.
- On each change in the `input` element, the `greeting` method is called again to render an updated greeting *(Line 10)*.

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';

function greetings({ target }) {
  var value = target? target.value : "";
  const element = (
    <div className="text-center my-2">
      <label> Full Name: </label>
      <input type="text" name="fullname" onChange={greetings} />
      <div className="border border-primary py-3">
          <h4> Greetings, {value}!</h4>
      </div>
    </div>
  );
  ReactDOM.render(
      element,
      document.getElementById('root')
  );
}

greetings({});

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

This works perfectly fine. But what if another component needs to read the current `value` of the greeting component? That is achievable if we declare `greeting` to be a class, rather than a function, so that its objects may also store variables accessible across components. 

# Adding `state` to components
Have a look at the updated React app given below:

- **Line 4:** Convert the greeting method to a class.
- **Line 5-7:** Maintain a local state with useful variables.
- **Line 11-13:** Every time the `stateChange` method is invoked, it extracts `value` from the passed target argument, and uses the `setState()` method to update the local values.

> **Warnings:** <br> 1. You should never update the state directly (i.e. `this.state.var = updatedVar`). <br> 2.  React may batch run multiple `setState()` calls for performance. So you should never rely on the directly modified values to calculate the next state, without the use of a *callback* function.


import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';

class Greeting extends Component {
  state = {
    fullname: '',
  }

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

  render() {
    return (
      <div className="text-center">
        <label htmlFor="fullname"> Full Name: </label>
        <input type="text" name="fullname" onChange={this.stateChange} />
        <div className="border border-primary py-3">
            <h4> Greetings, {this.state.fullname}!</h4>
        </div>
      </div>
    );
  }
}

export default Greeting;

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(<Greeting />, document.getElementById('root'));

Using setState() method in React

React's setState() allows class components to manage internal state and ensures updates trigger re-renders without direct state mutation.

Using setState() method in React

Adding state to components

Adding `state` to components