How to Display Updated Array After Adding To It?

Question

Just trying to figure this out, can't really get there... Basically, I have something in state called "arrayCodes" that is nothing but an array of strings. I want to type in something to add in the textbox, push it to the end of the "arrayCodes", then want the updated array to display on screen. Right now, I get 'A1A2' as the output, but I want 'A1A2(userinput)'. I've put some console logs, and it has confirmed that the user input is getting added to the state, but I can't figure out how to display it on screen. Any help is greatly appreciated.

Here is the component in question:

import React, { Component } from 'react';

class Testing extends Component {
    state = {
        arrayCodes: ['A1', 'A2'],
        currentCode: '',
    }

    addEditCode = (inputCode) => {
        //console.log("Add Edit Code")
        var arrayCode;
        arrayCode = this.state.arrayCodes
        console.log("array code before push", arrayCode)
        arrayCode.push(inputCode)
        console.log("array code after push", arrayCode)
        this.setState({ arrayCodes: arrayCode })
        console.log("Array of Codes is now: ", this.state.arrayCodes)
    }

    setCurrentCode = (input) => {
        this.setState({ currentCode: input })
    }

    render() {
        return (
            <div>
                <input type="text"
                    name="enteredCode"
                    placeholder="Enter an edit code to add..."
                    onChange={(event) =>         
                    this.setCurrentCode(event.target.value)} />

                <button onClick={() => 
                this.addEditCode(this.state.currentCode)}>Click to 
                add</button>

                <h1>Current array in state: {this.state.arrayCodes}</h1>

            </div>
        );
     }
}

export default Testing;

Answer 1

You want something like this:

class Testing extends React.Component {
  state = {
    arrayCodes: ["A1", "A2"],
    currentCode: ""
  };

  addEditCode = inputCode => {
    const { arrayCodes } = this.state;
    arrayCodes.push(inputCode);
    this.setState({ arrayCodes });
  };

  setCurrentCode = input => {
    this.setState({ currentCode: input });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="enteredCode"
          placeholder="Enter an edit code to add..."
          onChange={event => this.setCurrentCode(event.target.value)}
        />
        <button onClick={() => this.addEditCode(this.state.currentCode)}>
          Click to add
        </button>
        <h1>
          Current array in state:
          {this.state.arrayCodes.reduce((acc, c) => {
            return acc + c;
          }, "")}
        </h1>
      </div>
    );
  }
}

Working example here.