React: How to display mapped array after button press?

Question

I'm new to react and struggling to get this to work. I can display a mapped array, but I am trying to update the array, map it, then display it. Can't figure out how to get the mapped array to display after it's updated?

Tried to add the mappedItems to my function also, but that didn't seem to solve it. TIA.

import React, { Component } from 'react';

const itemsList = ['item1','item2'];

class RecieveInput extends React.Component {
    constructor(){
        super();
        this.state = {
            list: itemsList
        }
    }

    render(){
        const pressedEnter = event => {
            if (event.key === 'Enter') {
            this.state.list.push(event.target.value);
            console.log(this.state.list);
            }
        }  
        
        const mappedItemsList = this.state.list.map( (listItem, i) => <li>{this.state.list[i]}</li> )
     
        return(
            <div>
                <input 
                type ="text" 
                id="textInput"
                placeholder="Enter Item Here"
                onKeyPress={pressedEnter}
                />
                <ol className='ol'>{mappedItemsList}</ol>
             </div>
        )
    }
}  

export default RecieveInput

enter image description here

You should not mutate the state directly this.state.list.push(event.target.value);. This should be done using the provided this.setState i.e. this.setState({ list: [...list, event.target.value ]});. React uses this.setState to know when state has been updated and the shouldComponentUpdate method of a class component only does a shallow comparison on references so if you do not create a new array when setting the state React will not see it as a change. — Jacob Smit
– Jacob Smit, Commented Feb 7, 2021 at 22:23

Drew Reese · Accepted Answer · 2021-02-07 22:23:05Z

3

Issue

The pressedEnter callback should be declared in the component, not the render function. It should also not mutate the state object by pushing into the state array.

Solution

Move the pressedEnter handler into the component and use this.setState to enqueue an update. You need to shallow copy the existing state and append the new element into it so your list state is a new array reference.

const pressedEnter = event => {
  const { value } = event.target;
  if (event.key === 'Enter') {
    this.setState(prevState => ({
      list: prevState.list.concat(value), // or [...prevState.list, value]
    }));
  }
}

answered Feb 7, 2021 at 22:23

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

React: How to display mapped array after button press?

1 Answer 1

Issue

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related