Innovate anywhere, anytime withruncode.io Your cloud-based dev studio.
ReactJS

Understanding ReactJs Component, State and Props

2022-07-19

Component:

React Component is an independent, reusable code and it contains HTML +Java script. Components data will be stored in component's State. This state can be modified based on user action or other action. when a component state is changed React will re-render the component to the browser. you must implement render method when creating a component.

var HelloWorld = React.createClass({

      render: function() {

        return <h1>Hello World</h1>;

      }

    });

    ReactDOM.render(

      <HelloWorld />,

      document.getElementById('container')

    );

Above is a simple component which display Hello World heading to the Browser.

Props:

Props are similar to arguments for pure functions argument. Props of component are passed from parent component which invokes component. Props in a component cannot be modified(Immutable). Consider below example we are sending name prop to Hello World Component. all props can be accessible with this.props.

var HelloWorld = React.createClass({

  render: function() {

    return <div>Hello {this.props.name}</div>;

  }

});
ReactDOM.render(

  <Hello name="World" />,

  document.getElementById('container')

);

State

Component state can be modified over time in response to user actions, network responses, and anything. We have to implement class-based components by extending React.Component to get state features. Add a class constructor to add initial state.
below is a simple counter example which changes its state every time for user button click.

class Counter from React.Component {

   constructor(props) {

    super(props);

    this.state = {count: 0 };

  }

  onClick() {

    this.setState({count: this.state.count + 1});

  }

  render() {

    return (

      <div>

        <div>count:{this.state.count}</div>

        <button onClick={this.onClick}>click!</button>

      </div>

    );

  }

};

ReactDOM.render(<Counter />, document.getElementById("container"));

use set State to change the state of react Component. whenever state changes the react will re-render the component.