Change props from child component — ReactJS

This article will address the question theoretically and practically — How to mutate(change) props in child components ?

What are props ? — props are nothing but objects which are used to pass data from one component to another.

A component cannot directly mutate it’s own props. If it does, this is called antipattern.
Anti-patterns are certain patterns that are considered bad programming practices. Design patterns are common practices we follow while developing an application, anti-patterns are opposite of Design patterns.

The data flows from top to bottom in React. Any change which takes place in a parent component is communicated to the child component.

“Lifting the state up” is a term generally used when we talk about mutating a prop.

Solution :

As I had mentioned earlier — there are no direct ways to mutate a prop directly in child components. However when we pass the props from parent to child, we can also pass the function(with the logic) which changes the props. This way we can then call the function passed from parent inside the child component and mutate the prop. Hence the underlying logic to change the prop is not known to the child.

Practical example :

import React, { Component } from 'react';
class App extends Component {
  render() {
    const hello = 'Say Hello to learning Props/State in React!';
    return (
      <div>
        {isDisplayed ? <PrintMessage hello={hello} /> : null}
        <Button />
      </div>
    );
  }
}
class Button extends Component {
   constructor(props) {
     super(props);
     this.state = {
       isDisplayed: true,
     };
   }
  toggleShowHide = () => {
      this.setState(state => ({ isDisplayed:!state.isDisplayed}));
  };
  render() {
    return (
        <button onClick={this.toggleShowHide} type="button">
            Toggle Show/Hide
        </button>
    );
  }
}
const PrintMessage = ({ hello }) => <h1>{hello}</h1>;
export default App;

In the above example, Button component is a child component which maintains a state. PrintMessage is also a child component which prints the value passed from parent component only if ‘isDisplayed’ is true. However if you see isDisplayed is maintained by child component, so parent is not aware of this state object. Hence when we run the above program we get an error, saying isDisplayed is not defined.

So we will lift our state up, and define the isDisplayed property inside the parent component ‘App’.

import React, { Component } from ‘react’;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisplayed: true,
    };
  }
  toggleShowHide = () => {
    this.setState(state => ({ isDisplayed: !state.isDisplayed }));
  };
  render() {
    const hello = ‘Say Hello to learning Props/State in React!’;
    return (
     <div>
      {this.state.isDisplayed ? <PrintMessage hello={hello} /> :  null}
      <Button onClick={this.toggleShowHide} />
    </div>
   );
  }
}
const Button = ({ onClick }) => (
   <button onClick={onClick} type=”button”>
    Toggle Show/Hide 
   </button>
);
const PrintMessage = ({ hello }) => <h1>{hello}</h1>;
export default App;

In the solution above, we are passing the ‘isDisplayed’ as props to child component ‘Button’. Along with that we are also passing a function ‘toggleShowHide ’ which has the underlying logic to change the props. Hence when we call ‘‘toggleShowHide’ from ‘Button’ child component, we can mutate the props. ‘Button’ child component has no idea of the logic written inside ‘‘‘toggleShowHide’

All the corresponding components are re-rendered making use of the updated state via the props passed to child components.

Conclusion :

Remember that props are read-only and enable us to pass any data down our component tree. Lifting the state up and passing the function which has logic to change state is a solution to change the props from child components.