I am having trouble adding data to my table on submit

Question

I am new to React and trying to figure out how to enter information into a table onSubmit. i have tried to follow tutorials but when you are new, its difficult to know what your following. The output I hope to achieve is to enter a workout into the text box, choose a day for said work out and upon pressing the submission button, the work out populates the table matching the day chosen

I appreciate my code may not be great. However, any help here would be great.

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import Header from './components/Header';
import WorkOutList from './components/WorkoutList';
//import WorkoutAdder from './components/WorkoutAdder';
import WeightAdder from './components/WeightAdder';


function App() {
  return (
    <div className="App">
      <Header />
      <WorkOutList />
      <WeightAdder />
    </div>
  );
}

export default App;

import React from 'react';

class WorkoutAdder extends React.Component {
  state = {
    workout: '',
    day: ''
  };

  handleInputChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    console.log(this.state);
    return (
      <div>
        <p>Todays Workout is:{this.props.dayMatcher[0].exercise}</p>
        <form onSubmit={this.props.handleSubmit}>
          <h4>Select a day to add workout </h4>
          <label htmlFor="day" id="day" />
          <select
            className="btn btn-primary dropdown-toggle"
            type="text"
            name="day"
            onChange={this.handleInputChange}
          >
            <option value="n/a">pick a day</option>
            <option value="Mon"> Mon</option>
            <option value="Tue"> Tue</option>
            <option value="Wed"> Wed</option>
            <option value="Thu"> Thu</option>
            <option value="Fri"> Fri</option>
            <option value="Sat"> Sat</option>
          </select>
          <br />
          <br />
          <input
            type="text"
            placeholder="Enter Workout Here"
            name="workout"
            onChange={this.handleInputChange}
          />
        </form>
        <br />
        <p>
          <button
            onClick={this.handleSubmit}
            className="btn btn-primary btn-sm"
          >
            {' '}
            Add Workout
          </button>
        </p>
      </div>
    );
  }
}

export default WorkoutAdder;

import React from 'react';
import WorkoutAdder from './WorkoutAdder';

class WorkOutList extends React.Component {
  state = {
    workout: [
      { exercise: '', day: 'Mon', weight: 0, dayNum: 1 },
      { exercise: '', day: 'Tue', weight: 0, dayNum: 2 },
      { exercise: '', day: 'Wed', weight: 0, dayNum: 3 },
      { exercise: '', day: 'Thu', weight: 0, dayNum: 4 },
      { exercise: 'Yoga', day: 'Fri', weight: 0, dayNum: 5 },
      { exercise: '', day: 'Sat', weight: 0, dayNum: 6 }
    ]
  };


  handleSubmit = event => {
    event.preventDefault();
    this.setState(currentState => {
      let copyArr = [...currentState.workout];
      let newArr = copyArr.map(copy => {
        const copyWorkout = copy;
        copyWorkout.exercise = copyArr.push(this.props.handleInputChange);
        console.log(copyWorkout);
        return copyWorkout;
      });
      console.log(newArr);
      this.setState({ newArr });
    });
  };

  render() {
    const getToday = new Date().getDay();

    const dayMatcher = this.state.workout.filter(d => {
      if (d.dayNum === getToday) {
        return d.day;
      }
      return this.dayMatcher;
    });
    // console.log(new Date());
    // const theDate = new Date();
    // console.log(theDate.getDay());
    return (
      <>
        <WorkoutAdder
          dayMatcher={dayMatcher}
          handleSubmit={this.handleSubmit}
        />

        <div className="grid-container">
          {this.state.workout.map(exercise => {
            return (
              <div className="grid-item" key={exercise.day}>
                {exercise.day}-{exercise.exercise}
              </div>
            );
          })}
        </div>
      </>
    );
  }
}

export default WorkOutList;

Answer 1

First issue is you need to pass handleSubmit is not your class function in WorkoutAdder component i.e you need to fix like this :

<button
            onClick={this.props.handleSubmit} //need to add like this
            className="btn btn-primary btn-sm"
          >
            {' '}
            Add Workout
          </button>

another issue is that you are not setting state properly in handleSubmit function. You do not need to do nestedSetState.

this.setState({ newArr });

What this does it it setting newArr state with newArr variable. In your case it should be workout.

The handleSubmitCode should be like this:

handleSubmit = (event,data) => {
    event.preventDefault();
    console.log("Data",data);
    let copyArr = [...this.state.workout];
      let updateData = copyArr.map(stateData => { //check if it meets current one then update the excercise
        if(stateData.day===data.day){
          return {...stateData,exercise:data.workout,}
        }
        else{
          return stateData;
        }
      });
      this.setState({ workout:updateData }); //Update with new state
  };

Inside WorkoutAdder component

<button
            onClick={(e) => this.props.handleSubmit(e,this.state)}
            className="btn btn-primary btn-sm"
          >
            {' '}
            Add Workout
          </button>

demo :

Answer 2

Well since in the parent component WorkOutList you send the function handleSubmit to the child component WorkoutAdder. You can access it from the properties rather than from the component instance itself. so:

      <button
        onClick={this.handleSubmit}
        className="btn btn-primary btn-sm"
      >
        {' '}
        Add Workout
      </button>

should be

      <button
        onClick={this.props.handleSubmit}
        className="btn btn-primary btn-sm"
      >
        {' '}
        Add Workout
      </button>