Prop passing data information, but not reading properties-CodePudding

I'm trying to pass my plan object to a child component, to populate my modal. The console log is showing the prop object being passed correctly, but when I call the prop, it is showing undefined.

My Plan Modal:

const PlanModal = (props) => {
  const [plan, setPlan] = useState({})
  const [orm, setOrm] = useState({
    benchPressMax: 0,
    squatMax: 0,
    overHeadPressMax: 0,
    deadliftMax: 0,
  })
  useEffect(() => {
    console.log(props.planID)
    axios.get(`http://localhost:8080/findSpecificPlan/${props.planID}`, {
      headers: {
        'Content-Type': 'application/json'
      }

    }).then((response) => {
      setPlan(response.data);
      console.log(response.data)
    }).catch((error) => {
      console.log('error in getting plan')

    });

  }, []);

chooses which component to return:

 const planModalToggler =()=> {
    if(plan.name === 'Five Three One') {
      return (
        <FiveThreeOneModal plan={plan}/>
      )
      
    } else {
      return (
        <div>
          Not Working
        </div>
      )
    }
  }

My child component: (Just showing prop passing down and con log)

const FiveThreeOneModal = (props) => {
    const [plan, setPlan] = useState({})
    const [button, setButton] = useState(0)
  
console.log(props.plan)

My console log:

id: 68 name: "Five Three One" ormId: {benchPressMax: 123, squatMax: 1123, overHeadPressMax: 123,
 deadliftMax: 123, powerCleanMax: null} planEnd: "2022-05-03"planStart: "2022-05-03"[[Prototype]]: Object

Where I'm trying to use my prop: ( Ignore my ugly code, haha)

 <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: 
{Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>

My console log error:

Uncaught TypeError: Cannot read properties of undefined (reading 'ormId')

If I use that information in my actual planModal component, it works properly. (Minus all the prop information), but when I try and pass the prop to the child component is when I run into these issues.

Child component:

import axios from 'axios'
import React, {useState} from 'react'
const FiveThreeOneModal = (props) => {
    const [plan, setPlan] = useState({})
    const [button, setButton] = useState(0)
  
console.log(props.plan)

    const nextButtonHandler = () => {
  
      setButton(button   1)
    }
    const prevButtonHandler = () => {
      setButton(button - 1)
    }
  
  
    const toggleButtonHandler = () => {
      if (button === 0) {
        return (
          <div>
            <table className='workoutplan-header' id='workout-list'>
              <thead id='workout-list'>
                <tr>
                  <th>Week One</th>
                  <th>Day One</th>
                  <th>Day Two</th>
                  <th>Day Three</th>
                  <th>Day Four</th>
                  <th>Day Five</th>
                  <th>Day Six</th>
                  <th>Day Seven</th>
                </tr>
              </thead>
              <tbody id='workout-list'>
                <tr>
                  <th>Exercises<br />( ) = AMRAP</th>
                  <td>Bench Press and Overhead Press x 5/5/5  reps</td>
                  <td>Barbell Squat and Deadlift x 5/5/5  reps</td>
                  <td>Rest Day</td>
                  <td>Bench Press and Overhead Press x 5/5/5  reps</td>
                  <td>Barbell Squat and Deadlift x 5/5/5  reps</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
                <tr>
                  <th>
                    Set One
                  </th>
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .65)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .65)}</td>
                  <td>Rest Day</td>
  
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .65)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .65)}</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
                <tr>
                  <th>
                    Set Two
                  </th>
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .75)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .75)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .75)} Deadlift: {Math.round((props.lan.ormId.deadliftMax * .9) * .75)}</td>
                  <td>Rest Day</td>
  
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .75)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .75)}</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
                <tr>
                  <th>
                    Set Three
                  </th>
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .85)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .85)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .85)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .85)}</td>
                  <td>Rest Day</td>
  
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .85)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .85)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .85)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .85)}</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
              </tbody>
            </table>
            <div>
              <button className='next-button' onClick={nextButtonHandler}> NEXT </button>
            </div>
          </div>
        )
      } 
    }
    return (
        <div>
        {toggleButtonHandler()}
        </div>
    )
}

export default FiveThreeOneModal

CodePudding user response：

You have this line with .lan.ormId instead of .plan.ormId

<td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .75)} Deadlift: {Math.round((props.lan.ormId.deadliftMax * .9) * .75)}</td>