skip to Main Content

I am not getting the Input from form in child to parent.
Having a Form in child calling it from parent
Having on submit editData Function.
On submit , it should print me the input data, but it is printing undefined

parent

  const Main = () => {
       
        const todoData = [
            
            {id:0,todoname:"Study",todotoday:"Completing CSS today"},
            {id:1,todoname:"Coding",todotoday:"Leetcode 2 Problems"}
        ];
    
    const [onEdit,setonEdit] = useState([]);
     const [myArray,setmyArray] = useState(todoData);
     


     const editData = (id,ehe,ela) =>{
       console.log(id);
     console.log("-->"+ehe);
     
     setmyArray(myArray.map(obj =>{

    if(obj.id === id){
      return {...obj,todoname:ehe,todotoday : ela}
    }else{
      return obj;
    }  
   }));
  }
  return(
   {
         myArray.map((obj)=>{
          return ( 
              <div className="todocont" key={obj.id}>
            <div className="todobox"  style={{opacity: checkedItems.includes(obj.id) ? 0.2 : '', }}>
            <h2 className="head" >Todo: {obj.todoname}</h2>
            <h3 className="todocont">{obj.todotoday}</h3>
            <div className="todoboxbtn">
             <TodoIcon  />
            </div>
            </div>
            <div className="editInput">
            <SetEdit className="editComp" onSubmit={() => editData(obj.id)}/>
            </div>
            </div>
            )
        })
      }
      </div>
    </div>
  )
  
  }
  

Child

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

const SetEdit = (props) => {

    const [fh,setfh] = useState("");
    const [El,setEl] = useState("");

    const handleHead=(e)=>{
        setfh(e.target.value);
        console.log(fh);
     }
 
     const handleElab = (e) =>{
         setEl(e.target.value);
     }

    const handleSubmit = (e) =>{
        e.preventDefault();
        props.onSubmit(fh,El);
    }

  return (
    <div  className='editInp'>
    <form  className='form' onSubmit={handleSubmit}>
      <input type="text" placeholder='New Head' value={fh} onChange={handleHead}/>
      <input type="text" placeholder='New Todo' value={El} onChange={handleElab}/>
      <button className='btn'>Submit</button>
      </form>
    </div>
  )
}

export default SetEdit

Please help me with the problem
—————————————————————- ——————————-

2

Answers


  1. You should pass your input params in callback func that you’re passing to SetEdit component in parent.
    Try this:

    Parent:

    <SetEdit 
      className="editComp" 
      onSubmit={(input1, input2) => editData(obj.id, input1, input2)}
    />
    
    Login or Signup to reply.
  2. Because in <SetEdit className="editComp" onSubmit={() => editData(obj.id)}/> you only pass the first parameter of the editData function and doesn’t specify the ehe and ela of const editData = (id,ehe,ela) =>{}.

    You should write it this way:

    <SetEdit className="editComp" onSubmit={(ehe, ela) => editData(obj.id, ehe, ela)}/>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search