How do I add input values to an object and display the results in React?

Question

I'm working on a CV Application in React and part of the process is adding your previous Education and displaying it so a potential employer can see it. I have an input set up so users can enter information and upon hitting save, the values are sent and displayed in a separate div.

This form also only shows up when I click the +Add Education button at the bottom.

<form>
  <label htmlFor="school">School</label>
  <input type="text" name="school" onChange={(e) => this.setSchool(e.target.value)} />
  <label htmlFor="study">Field of Study</label>
  <input type="text" name="study" onChange={(e) => this.setStudy(e.target.value)} />
  <button onClick={this.onSubmit} className="save">Save</button>
</form>
  <button onClick={this.toggleForm} className="form-btn">
    + Add Education
  </button>

I also have this onChange event that's attached to each input which takes the values from each input and displays them to a div.

onChange={(e) => this.setSchool(e.target.value)} 

Here is the code I'm using for both setSchool and setStudy.

class Education extends Component {
  constructor(props) {
    super(props);
    this.state = {
      school: "",
      study: "",
      showOutput: false,
    };

  setSchool = (value) => {
    this.setState({ school: value });
  };

  setStudy = (value) => {
    this.setState({ study: value });
  };

I also have this code which is placed above my other jsx code.

render() {
    return (
      <>
        <div>
          {this.state.showOutput && (
            <div className="experience">
              <p>{`School: ${this.state.school}`}</p>
              <p>{`Field of Study: ${this.state.study}`}</p>
            </div>
          )}

This code exists for the purpose of displaying only when the setSchool and setStudy values aren't empty. When the user fills them out and clicks save, it displays in a div above the form.

Now here's where I need help

Everything about this code works as intended. However, when I go to click +Add Education for the second time, the values are simply being overriden. So instead of having two separate divs like this:

Div 1

School: University of Test

Field of Study: Comp. Sci

Div 2

School: University of Test 2

Field of Study: Comp. Sci 2

I'm only getting one because the second div of inputted information is overriding the first.

School: University of Test 2

Field of Study: Comp. Sci 2

I've been trying so solve this issue and the only thing I can think of is to add each input value to an object rather than just adding it to setState:

const study = [
  {
    school: school,
    fieldofStudy: fieldofStudy,
  },
];

But I can't seem to figure out how to add the values to this object and then display the results. I know if I displayed the results by looping through the array instead of e.target.value I could get them to show up but everything I've tried thus far hasn't worked.

Answer 1

Add a state array to keep track of your school/study pairs ( this.state.education , for example) and then add them with the button is pressed like:

setEducation = () =>{
  this.setState((state)=>({education: [...state.education, {study: this.state.study, school: this.state.school}]}))

And then just loop through this.state.education in your render