appending objects from child component to parent component-CodePudding

How would I append an object from a child component to a parent components object? Lets say I have a parent component like so:

const Parent = (props.data) = {
const data = [{}]

useEffect(() => {
 console.log(data)
}, [])

return (
 <View>
  <ChildComponent data={data} />
  <AnotherChildComponent data={data} />
 <View>
)
}

And here is the child component:

const ChildComponent = (props) => {

const data = useState(props.data)

useEffect(() => {
 //add value to data
 data.input = "This is Child Component input"
},[])

return (
 <View>
  <Text>{data.input}</Text>
 </View>
)
}

Then here is AnotherChildComponent:

const AnotherChildComponent = (props) => {

const data = useState(props.data)

useEffect(() => {
 //add value to data
 data.input = "This is another Child Component with a different input"
},[])

return (
 <View>
  <Text>{data.input}</Text>
 </View>
)
}```

Then in the parent component id have a function that logs data, the expected output should be:

{ input: "This is Child Component input" } 
{ input: "This is another Child Component with a different input" }

CodePudding user response：

You can pass the setData function as a prop to the children of the parent and set the data or there or create a callback function.

Remark: create a state.

const Parent = (props.data) = {
const [data, setData] = useState([])

useEffect(() => {
 console.log(data)
}, [])

return (
 <View>
  <ChildComponent data={data} setData={setData} />
  <AnotherChildComponent data={data} setData={setData} />
 <View>
)
}

In ChildComponent.

const ChildComponent = (props) => {

const [input, setInput] = useState()

useEffect(() => {
 const obj = {input: "This is ChildComponent input"}
 //add value to data for parent state
 setData(prev => [...prev, obj])
 // add value to child state for text
 setInput(obj)
},[])

return (
 <View>
  <Text>{obj.input}</Text>
 </View>
)
}

In another child.

const AnotherChildComponent = (props) => {
const [input, setInput] = useState()

useEffect(() => {
 const obj = {input: "This is another child component with a different input"}

 //add value to data
 setData(prev => [...prev, obj])
 // add value to child state for text
 setInput(obj)
},[])

return (
 <View>
  <Text>{obj.input}</Text>
 </View>
)
}

CodePudding user response：

You can use state in your parent component and a callback function which is passed with prop in your children components, here using hooks:

const Parent = () = {
const [data, setData] = useState([{}])
    
const addInput = useCallback((newInput)=>{
    setData((previousData)=>[...previousData,newInput])}
    ,[setData])
    
useEffect(() => {console.log(data)}, [])
        
return (
    <View>
        <ChildComponent data={data} addInput={addInput}/>
        <AnotherChildComponent data={data} addInput={addInput} />
    <View>
)
}

Your childComponent:

const ChildComponent = (props) => {
        
const [input, setInput] = useState("")
        
const onChangeText= (text)=>{
setInput(text)
}
return (
         <View>
          <TextInput
            onChangeText={onChangeText}
            value={input}
          />
         <Button title="Add Input" 
                 onPress={()=>props.addInput({"input":input})}/>
         {props.data.map((data)=>{return(
         <Text>{data.input}</Text>

         )}}

         </View>
        )
}