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
You should pass your input params in callback func that you’re passing to
SetEdit
component in parent.Try this:
Parent:
Because in
<SetEdit className="editComp" onSubmit={() => editData(obj.id)}/>
you only pass the first parameter of theeditData
function and doesn’t specify theehe
andela
ofconst editData = (id,ehe,ela) =>{}
.You should write it this way: