How to pass props from component A to component C

Question

Here I want to pass props from A to c. Basically, I have created a function in the A component and aspecting an argument from the C component. but this does not work. so, please tell me How do I pass arguments in C to A.

import React from 'react'
    import B from './B'
    
    const A = () => {
        const displayData=(parameter)=>{
           // .......... somecode 
              }
        return (
            <div>
                <B 
                sendData ={displayData} 
                />
                
            </div>
        )
    }
    
    export default A
    
    
    
    //component B
    
    import React from 'react'
    import C from './C'
    
    const B = ({sendData}) => {
        return (
            <div>
                <C //component c
                sendData = {sendData}
                />
                
            </div>
        )
    }
    
    export default B
    
    //component c
    
    import React from 'react'
    
    const C = ({sendData}) => {
    
        sendData(argument);
        return (
            <div>
                
            </div>
        )
    }
    
    export default C

Is there any reason as to why you don't want to pass it through B? Because your code appears to work just fine the way it is. — Emil Karlsson, Oct 01 '21 at 09:48

score 1 · Answer 1 · answered Oct 01 '21 at 10:40

This question is a bit unspecific.It would be very nice if you could be more specific on how you call and use these components and what you try to accomplish.In short a bit of "working" code would be nice.

At first you might want to wrap the function in Component C in a useEffect Hook. Because I do not know if "argument" is filled when the function is called so like this:

useEffect(() => {
   sendData(argument)
}, [argument])

So it will be fired everytime argument changes.

Then I guess it is called "display data" because it changes a value and displays it so you might want your app to rerender when the datachanges? So in A you declare a setState function. It isn´t that easy to assume what you try to accomplish.

const [data, setData] = useState(standardValue);
const displayData = () => {
     //your logic
     setData(the preprocessed value);
}

The next thing you could do to bypass component B is using React Context With this you can Exchange Data between all the components that are wrapped in the provider. That solution might be a bit overkill for just one argument.

If you want to make it as easy as possible something like react-redux could be in your favor. This is a context for your whole application. There you can store all stateful data, change it and use it in every component that is connected to the store.

How to pass props from component A to component C

1 Answers1