I'm trying to manipulate the DOM by inserting 2 values

Question

/////////index.ts///////

const Front =() =>{
  
    const [inputs, setInputs] = useState({});

    };

    const addinputs = useCallback((event) => {
     
      const name = event.target.name;
      const value = event.target.value;
      
      setInputs(values => (
        {...values, [name]: value}))
        
    },[inputs]);

  return (

    <>
    <h1 id="header1">write you Thoughts</h1>
    <label htmlFor='txtname'>Ente your name</label><br></br>
    <input name="name"  onChange={addinputs} value={inputs.name || ""} type="Text" id="txtname" ></input><br></br>
    <label htmlFor="txtname">What  are you thinking of</label><br></br>
    <input name="thought"  onChange={addinputs} value={inputs.thought || ""} id="txt1" type="Text"/><br></br>
    <Thoughts addThought={addinputs}></Thoughts>
    <hr/>
    </>

  )

/////////thoughts.ts///////

import {memo} from 'react' 

const Thoughts = ({inputs ,addThought}) =>

{

    console.log(inputs);
    return(
    <>
        <h1>new thought</h1>    
        {inputs?.map((input,index) =>
           
      {
         return <p key={index}>{input}</p>      
      })}

       <button onClick={addThought} type='button'>Add thought</button>   
    </>
    );
};


export default memo(Thoughts);

but in console.log(inputs) I get undefined ,someone have a clue why?

Answer 1

inputs is a state inside the index.ts.You need to pass the inputs to Thoughts component

<Thoughts addThought={addinputs} inputs={inputs}></Thoughts>