How to use setState to splice into an array in the state?

Question

My state.events is in array that is made up of the component instance: EventContainer.

I want my setState to place a new EventContainer in the state.events array. However, I want that EventContainer to go in the index immediately after the specific EventContainer that made the setState call.

I'm looking for help with making the adjustments necessary to my approach or, if my entire approach is bad, a recommendation on how to go about this. Thank you very much.

I'm developing an itinerary builder which is made up of rows/EventContainers that represent an activity on a given day.

Each EventContainer has a button that needs to offer the user the ability to onClick an additional row immediately after that EventContainer.

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

    this.state = {
      events: [],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }




    pushNewEventContainerToState (index){
       let newEvent = <EventContainer />;
       this.setState(prevState => {
         const events = prevState.events.map((item, j) => {
           if (j === index) {
             events: [...prevState.events.splice(index, 0, newEvent)]
            }
          })
        })
      }




  render(){
    return (
        <>
          <div>
              <ul>
                  {
                    this.state.events === null
                    ? <EventContainer pushNewEventContainerToState= . 
 {this.pushNewEventContainerToState} />
                    : <NewEventButton pushNewEventContainerToState={this.pushNewEventContainerToState} />
                  }




                  {this.state.events.map((item, index) => (
                    <li
                        key={item}
                        onClick={() => 
 this.pushNewEventContainerToState(index)}
                    >{item}</li>
                  ))}

              </ul>

        </div>
      </>
    )
  }
}

My goal in setState was to splice newEvent into this.state.events immediately after the index (the parameter in pushNewEventContainerToState function).

I'm getting this error but I'm guessing there's more going on than just this: Line 23:22: Expected an assignment or function call and instead saw an expression no-unused-expressions.

Answer 1

I can see at least 2 issues with the code. - Splice will mutate the array in place - You are not returning the updated state.

You can instead use slice to build the new array.

pushNewEventContainerToState(index) {
  let newEvent = < EventContainer / > ;

  this.setState(prevState => {
    const updatedEvents = [...prevState.events.slice(0, index], newEvent, ...prevState.events.slice(index + 1];

      return {
        events: updatedEvents
      })
  })
}