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.

Software Developer. I write about Full Stack, NLP and Blockchain. Buy me a coffee - buymeacoffee.com/viveksinless

Love podcasts or audiobooks? Learn on the go with our new app.

Convert Html to Pdf with CSS

Setting up a Design System in Storybook with React, Styled Components, Tailwind, and Typescript in…

Lessons I’ve learned after a year of using TypeScript

How to Compress Image With Custom Ratio Without The Support of Third Party Library?

Compress Image With Custom Ratio

Mocking in TypeScript

Video conferencing guide for Voximplant developers.

Multiplayer Interaction with p5js

Understanding Linked Lists

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vivek Singh

Vivek Singh

Software Developer. I write about Full Stack, NLP and Blockchain. Buy me a coffee - buymeacoffee.com/viveksinless

More from Medium

Pass props more easily using the object spread operator

Leetcode #845 — Longest Mountain In Array

LeetCode — 1306 Jump Game III javascript solution (faster than 100%)

Internal Representation of Objects in JS