React update child component state from parent using getDerivedStateFromProps

Question

Am new to React, I like to maintain state in parent component itself and pass the same to all child components on child component I would like to update the child state from the parent component state am using getDerivedStateFromProps to update it.But i guess am doing it wrong as the values are updated in inner level object like inside state there is a level object named state, I had tried to spread it as well but it didn't work.

Parent Component

  import React from 'react';
  import './App.css';
  import Navbar from './components/Navbar';

  class App extends React.Component {
    state = {
      name: 'Kannan',
      countryCode: '',
      mobile: '',
      isModalOpen: false,
    };

    render() {
      return (
        <div className="App">
          <Navbar params={this.state}></Navbar>
        </div>
      );
    }
  }

  export default App;

Child Component

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

    console.log(props.params);

    this.state = {};
  }

  static getDerivedStateFromProps(props, state) {
    console.log(state);
    return { state: props.params };
    // return  {state: { ...props.params }} ;
  }

  render() {
    console.log(this.state);
    return (
      <div>
           "Something"
      </div>
    );
  }
}

I have tried with { state: ...props.params} and also {state: props.params} in the render console.log am getting

   {state: {…}}
     state: {name: "Kannan", countryCode: "", mobile: "", isModalOpen: false}
    __proto__: Object

what am expecting is

 state: {name: "Kannan",countryCode:"",mobile:"",isModalOpen:false}

Note: No REDUX . I don't want to use REDUX If there is any other better approach to update child component state? Also, I would like to know whether maintaining state for each child component is a good practice or not? Any help is appreciated

Answer 1

Well I would suggest to use redux instead of passing the whole state from Parent to child. But if you really wanna do this then it should be like below:

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';

**Parent Component**

class App extends React.Component {
  state = {
    name: 'Kannan',
    countryCode: '',
    mobile: '',
    isModalOpen: false,
  };

  render() {
    return (
    <div className="App">
        <Navbar params={this.state}></Navbar>
    </div>
    );
  }
}

export default App;

**Child Component**

class NavbarComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    return { ...props.params };
  }

  constructor(props) {
    super(props);
    this.state = props.params;
  }

  render() {
    return (
      <div>
        <span>"Something"</span>
      </div>
    );
  }
}

Answer 2

Instead of

static getDerivedStateFromProps(props, state) {
    return { state: props.params };
}

Try

  static getDerivedStateFromProps(props, state) {
    return props.params;
  }

In the first piece of code, you're passing an object with a key state , and your child component will have it's state set to {state: whateverCameFromAnotherComponent} as you mention in "inside state there is a level object named state". If you just pass the state from your parent as you receive it, the child's state should be the very same as the parent's.

I tried to recreate your scenario here:

and as you can see, the Navbar's state is set to Object {name: "Kannan", countryCode: "", mobile: "", isModalOpen: false} , without the state key in it.