import React, { useState } from "react";

const CstmInput = (props) => { return ( <input name={props.name} type="text" value={props.value} onChange={(event) => props.onInputChange(event)} /> ); };

export default CstmInput;

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

const HierarcyTest = () => { let rowData = [ { name: "first", id: 10 }, { name: "second", id: 20 }, ]; const [data, setData] = useState(rowData); const [name, setName] = useState({ fn: "test" });

const onInputChange = (e) => { setName({ ...name, fn: e.target.value }); };

let updateValue = () => { let newData = data.map( (item, index) => (item.id = ( <CstmInput name={item.name} value={item.id} onInputChange={(e) => onInputChange(e)} /> )) ); setData([...data, newData]); }; return ( <div> <div>Testing</div> {data.map((val) => ( <h6> {" "} {val.name} {val.id} </h6> ))} <button onClick={updateValue}> Click </button> </div> ); };

export default HierarcyTest;