Here i am setting the input fields for form. I am not able to set the jobCardNo value which is in other component

Viewed 17
const initialValues = {
    code: '',
    jobCardNo: '',
    serial: '',
    technicalNo: '',
    lineNo: '',
    show: false,
  };
  const [values, setValues] = useState(initialValues);

  const handleInput = (e: { target: { name: any; value: any } }) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };
<input
  className="input-cc"
  type="text"
  name="code"
  onChange={handleInput}
 />
 <JobCardHeader {...values} />

I am receiving the values in the child component like below and i wantto update the values which is in parent component. Here in the input field I am not able to set jobCardNo value.

 const JobCardHeader = (values: any) => {
<input
 className="input"
 type="text"
 name="jobCardNo"
 onChange={handleInput}
 />
}
1 Answers

..Parent component drill the props like this way..

<JobCardHeader  values={values} handleInput={handleInput} />

then from children try,

const JobCardHeader = ({values, handleInput}) => {
    <input
     className="input"
     type="text"
     name="jobCardNo"
     onChange={handleInput}
     />
}
Related