here I want to invoke the MineralOutput component after the submit button and pass in the age, gender, and userid with state. This is the component that I imported. When I click the submit button, I get a 404 status code error. I'm using Axios for requests and it has already worked before when I wanted to post inside a

My imported component seems to not be taking in my state values

 import React, { useState } from "react";
import { MineralOutput } from "./Quantity";

export function Calculation(props){
       
   const [age, setAge] = useState('');
   const [gender, setGender] = useState('');
   const [userid, setUserid] = useState('');

   function handleChange(e){
    setAge(e.target.value);
   };
   function handleChangeGender(e){
    setGender(e.target.value);
   };
   function handleChangeUserid(e){
    setUserid(e.target.value);
   };

here I want to invoke the MineralOutput component after the submit button and pass in the age, gender, and userid with state.

 function handleSubmit(e){

    <MineralOutput age={age} gender={gender} userid={userid} />

   };

   

   return(
    <form onSubmit={handleSubmit}> 
    <div><label>age
        <input type="text" onChange={handleChange}
         value={age}
        /></label><br></br>
        <label>gender
        <input type="text" onChange={handleChangeGender}
         value={gender}
        /></label><br></br>
        <label>userid
        <input type="text" onChange={handleChangeUserid}
         value={userid}
        /></label><br></br>
        <input type="submit" value="submit" />
    </div></form>
   )


      
 
}

This is the component that I imported.

export function MineralOutput(age, gender, userid){
    if (age >= 71 && gender == 1) {
          
        let body = {
     mineralslId: 3,
     userId : userid,
     choline: 425,
     magnesium: 420,
     calcium: 1200,
     zinc: 8,
     iron: 8,
     copper: 900,
     selenium: 55,
     manganese: 1.8,
     phosphorus: 700,
     potassium: 2600,
     iodine: 150,
     chromium: 20,
     flouride: 3,
     sodium: 2300,
     chloride: 1.8
      };
    
      APIPost("minerals", body);

}
}

When I click the submit button, I get a 404 status code error. I’m using Axios for requests and it has already worked before when I wanted to post inside a class. But, this time I want to try and post by importing a component and passing in the values.

Answer

Solved by @windowsill. My “Component” MineralOutput wasn’t a component, but a function. So instead of <MineralOutput /> I just needed to call it like MineralOutput(1,2,3)

Advertisement

Answer