Updating Props (or State) in Inputs Mapped from Object Array with React

Question

I have an object array that I'm outputting to a form of inputs. These inputs need to be updated, the values rendered to show the changes. I'm able to console the key and new value but the error I receive is that metafields.map is not a function.

My code is as follows:

class EditMetafields extends React.Component {
  constructor(props) {
    super(props);
    this.state = { metafields: [] }
  }

  componentDidMount() {
    // retrieving data from the db to populate metafields
    metafields = [
      {id: 0, key: "key0", value: "value0"},
      {id: null, key: "keyNull", value: "valueNull"},
      {id: 2, key: "key2", value: "value2"},
    ]

    this.setState({ metafields: metafields });
  }

  render() {
    const { metafields } = this.state;
    const formFields = metafields.map((props) => 
      <TextField 
        key={props.id} 
        label={props.key} 
        id={prop.id} 
        value={props.value} 
        changeKey={props.id} onChange={(val) =>{
          console.log(props.key, val); //returns accurate output i.e. "key0 value0a" when 'a' key pressed
          this.setState({ metafields: { ...this.state.metafields, [props.key]: val } }) //TypeError: metafields.map is not a function after 'a' key pressed
        }
      } />
    );

    return (
     <Page>
       <Form>
         {formFields}
       </Form>
     </Page>
    )
  }
}

When it was an array of object containing a single key/value pair I was able to pair and change without issue but now that I have to attach ids and more to the object React gets upset with Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

I need to work with objects containing id, namespace, key, and value and output each object to a input within a form that can be updated but I'm not sure if I'm using React properly by assigning metafields to props. Links to relevant articles or a point in the right direction would be much appreciated!

Remolten · Accepted Answer · 2020-01-13 22:28:27Z

1

As Brian mentioned, this line:

this.setState({ metafields: { ...this.state.metafields, [props.key]: val } })

changes the metafields state variable into an object. What I think you're trying to do, is update an element's value in the metafields array, based on key.

To accomplish this, you should use map and use the callback variant of setState (since you're depending on the previous state of metafields):

this.setState(prevState => {
    return { metafields: prevState.metafields.map(metafield => {
        if (metafield.key === props.key) {
            metafield.value = val;
        }
        return metafield;
    })};
});

This code will update the correct element in the metafields array with the new value.

edited Jan 13, 2020 at 22:28

answered Jan 13, 2020 at 22:23

Remolten

2,7022 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mezzomix Over a year ago

Thank you, I have never used prevState, it's going into the toolkit.

mezzomix Over a year ago

Followup question on this; if I'm seeking to update and element's value in an array without keys would I need only compare the index?

Collectives™ on Stack Overflow

Updating Props (or State) in Inputs Mapped from Object Array with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related