Submit formsdata into a table in ReactJS

Question

Sorry for this newbie question but im pretty new to ReactJS and JavaScript, my problem is that im trying to submit the values in my input fields in the table that contains the column-headers: Exercise, Set, Reps and Description. And my goal is when i hit the ''Add exercise to workoutprogram'' that the values are stored in the table and that i can add some new values in a new row just down under, but it does not work because when i hit the add-button the page is just refreshed and the values are not stored in the table.

Here is my code:

import React from 'react'
import './Trainerworkout.css'
import { useState } from 'react/cjs/react.development';


export default function Trainerworkout() {
   const [workout, setWorkout] = useState([
      {Exercise: "", Sets: "", Reps: "", Description: ""}
   ]
  )

  function handleChange(event) {
    const value = event.target.value;
    setWorkout({
        ...workout,
        [event.target.name]: value
   });
  }

  function handleSubmit(event) {
      workout.push(`${workout.Exercise} ${workout.Sets} ${workout.Reps} ${workout.Description}`)
  }


  return (
     <>
       <h3>Add a workout program to a client</h3>

       <form onSubmit={handleSubmit}>
            <label>
                Exercise:
                <input type="text" name="Exercise" value={workout.Exercise || ''} onChange={handleChange}></input>
            </label>
            <br></br>
            <br></br>
            <label>
                Set:
                <input type="text" name="Sets" value={workout.Sets || ''} onChange={handleChange}></input>
            </label>
            <br></br>
            <br></br>
            <label>
                Reps:
                <input type="text" name="Reps" value={workout.Reps || ''} onChange={handleChange}></input>
            </label>
            <br></br>
            <br></br>
            <label>
                Description:
                <input type="text" name="Description" value={workout.Description || ''} onChange={handleChange}></input>
            </label>
            <br></br>
            <br></br>

            <button type="submit">Add exercise to workoutprogram</button>
        </form>

        <div className="table">
           <table className="exerciseTable">
              <thead>
                 <tr>
                    <th>Exercise</th>
                    <th>Set</th>
                    <th>Reps</th>
                    <th>Description</th>
                 </tr>
              </thead>
              <tbody>
                  <tr>
                     <td>{workout.Exercise}</td>
                     <td>{workout.Sets}</td>
                     <td>{workout.Reps}</td>
                     <td>{workout.Description}</td>
                  </tr>
              </tbody>
           </table>
        </div>
      </>
   );
}

Answer 1

You need another state to store your data (if you refresh the page the data will go). Try this :

import React, { useState } from 'react';
import './style.css';

export default function Trainerworkout() {
  const [workout, setWorkout] = useState({
    exercise: '',
    sets: '',
    reps: '',
    description: '',
  });

  const [workoutData, setWorkoutData] = useState([]);

  const handleChange = (e) => {
    e.preventDefault();
    setWorkout({
      ...workout,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setWorkoutData([...workoutData, workout]);
    setWorkout('');
  };

  const { exercise, sets, reps, description } = workout;

  return (
    <>
      <h3>Add a workout program to a client</h3>

      <form onSubmit={handleSubmit}>
        <label>
          Exercise:
          <input
            type="text"
            name="exercise"
            placeholder="Exercice"
            value={exercise || ''}
            onChange={handleChange}
          />
        </label>
        <br></br>
        <br></br>
        <label>
          Set:
          <input
            type="text"
            name="sets"
            placeholder="Sets"
            value={sets || ''}
            onChange={handleChange}
          />
        </label>
        <br></br>
        <br></br>
        <label>
          Reps:
          <input
            type="text"
            name="reps"
            placeholder="Reps"
            value={reps || ''}
            onChange={handleChange}
          />
        </label>
        <br></br>
        <br></br>
        <label>
          Description:
          <input
            type="text"
            name="description"
            placeholder="Description"
            value={description || ''}
            onChange={handleChange}
          />
        </label>
        <br></br>
        <br></br>

        <button type="submit">Add exercise to workoutprogram</button>
      </form>

      <div className="table">
        <table className="exerciseTable">
          <thead>
            <tr>
              <th>Exercise</th>
              <th>Set</th>
              <th>Reps</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {workoutData &&
              workoutData.map((d, index) => (
                <tr key={index}>
                  <td>{d.exercise}</td>
                  <td>{d.sets}</td>
                  <td>{d.reps}</td>
                  <td>{d.description}</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    </>
  );
}

Demo : Stackblitz