Wsrtjtyk

I am trying to update purely just the firstName, lastName and profile for an object without destroying any other data within that object...

Here's an example of the current state.

  state = {

    children: [

      {

        id: 1,

        firstName: 'Bella',

        lastName: 'Laupama',

        profile: 'child_care',

        schedules: [

          {

            id: 1,

            date: '25 December, 2018',

            parent: 'Chris',

            activity: 'Christmas'

          },

          {

            id: 2,

            date: '28 December, 2018',

            parent: 'Mischa',

            activity: 'Christmas with Malane Whanau'

          },

          {

            id: 3,

            date: '31 December, 2018',

            parent: 'Laura',

            activity: 'New Years Eve'

          },

          {

            id: 4,

            date: '1 January, 2019',

            parent: 'Laura',

            activity: 'New Years Day'

          }

        ]

      }

    ]

  }

And here's the current function I'm trying to pass it to update the current state...

      editChild = (first, last, prof) => {

        var updatedChild = {

          firstName: first,

          lastName: last,

          profile: prof

        }

        var children = this.state.children



        for (var i = 0; i < children.length; i++) {

          if (children[i].firstName === first) {

            children[i] = updatedChild

          }

        }

        this.setState({ children })

      }



**UPDATE**



Here's the code where I'm calling the function ( from a child component )



export default class EditChild extends React.Component {

  state = {

    firstName: '',

    lastName: '',

    profile: '',

  }



  handleChange = e => {

    this.setState({

      [e.target.name]: e.target.value

    })

  }



  submitHandler = e => {

    e.preventDefault()

    this.props.editChild(this.state.firstName, this.state.lastName, this.state.profile)

    // Final validation before submitting to server

    console.log('SUBMITTED:', this.state)

    // Clear the state to clear the form

    this.setState({

      firstName: '',

      lastName: '',

      profile: ''

    })

  }

...form etc is in the render etc...

The form works fine and console logs the result like this:

SUBMITTED: 

{firstName: "Donald", lastName: "Trump", profile: "face"}

UPDATE

Thank you to @Tholle and @charlietfl for leading me in the right direction. Basically I needed to be passing the ID as well, and not trying to match based off the first name, as the first name is obviously something that can be changed from the edit form as well. So if I changed Bella Laupama to Charlie Chaplan, it wouldn't find the id.

So I used @Tholle code and modified it to search and replace by id and it worked perfectly :)

 editChild = (id, first, last, prof) => {

    var updatedChild = {

      firstName: first,

      lastName: last,

      profile: prof

    }



    this.setState(prevState => {

      const children = [...prevState.children]

      const childIndex = children.findIndex(child => child.id === id)



      children[childIndex] = { ...children[childIndex], ...updatedChild }



      return { children }

    })

    console.log(this.state)

  } 

You can get the index of the child with findIndex and then replace the object with that index in a new array with a copy of the original object with all the properties in updatedChild added to it.

Example

class App extends React.Component {

  state = {

    children: [

      {

        id: 1,

        firstName: "Bella",

        lastName: "Laupama",

        profile: "child_care",

        schedules: [

          {

            id: 1,

            date: "25 December, 2018",

            parent: "Chris",

            activity: "Christmas"

          },

          {

            id: 2,

            date: "28 December, 2018",

            parent: "Mischa",

            activity: "Christmas with Malane Whanau"

          },

          {

            id: 3,

            date: "31 December, 2018",

            parent: "Laura",

            activity: "New Years Eve"

          },

          {

            id: 4,

            date: "1 January, 2019",

            parent: "Laura",

            activity: "New Years Day"

          }

        ]

      }

    ]

  };



  editChild = (first, last, prof) => {

    var updatedChild = {

      firstName: first,

      lastName: last,

      profile: prof

    };



    this.setState(prevState => {

      const children = [...prevState.children];

      const childIndex = children.findIndex(child => child.firstName === first);



      children[childIndex] = { ...children[childIndex], ...updatedChild };



      return { children };

    });

  };



  render() {

    return (

      <div>

        <div>{JSON.stringify(this.state)}</div>

        <button onClick={() => this.editChild("Bella", "Doe", "Programmer")}>

          Edit child

        </button>

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id="root"></div>

You can do what you're looking for using ES6 Object spread syntax:

import React from "react";

import ReactDOM from "react-dom";



class App extends React.Component {

  state = {

    firstName: "Bill",

    lastName: "Gates",

    age: 2018

  };



  update = (firstName, lastName) => {

    const newObj = { firstName, lastName };

    this.setState({ ...newObj });

  };



  render() {

    return (

      <h1>

        <button onClick={() => this.update("Steve", "Jobs")}>

          Click to update

        </button>

        <hr />

        {this.state.firstName} {this.state.lastName} {this.state.age}

      </h1>

    );

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

CodeSandbox example here.

What's happening here with this.setState({ ... newObj }) is that any values in this.state. which have the keys which match the keys in newObj will be overwritten with the values from newObj, and leave the other values unchanged.