Question 195876 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to pass a variable from child component to parent component in react

I have one component which is returning the Image and which Height is coming from api response

const Banner = () => {
    const [AdData, setAdData] = useState();
    const [showBanner, setShowBanner] = useState(false);
    const [currentIndex, setCurrentIndex] = useState(0);

    const imageHeight = MiscUtils.returnDefaultValueIfNotValid(0, AdData, 'fetchAds', 'ads', currentIndex, 'image', 'height');

    return (
        <Image 
            style={Styles.image}
            resizeMode={'stretch'}
            source= {{uri: imageUrl}}
            height={imageHeight}
        />
    )
}
export default Banner

I have one more component where in useEffect I need to use the imageHeight from Banner component file and instead of 65 I need imageHeight

const TabScreen = () => {
    useEffect(() => {
        if(ref.current && !isScrollOnTop(ref.current.getCurrentScrollOffset())) {
            (isDisplayAdBannerVisible) ? 
            ref.current.scrollToOffset(0, ref.current.getCurrentScrollOffset() + 65, true) : 
            ref.current.scrollToOffset(0, ref.current.getCurrentScrollOffset() - 65, true)
        }
    })
}

export default React.memo(TabScreen)

Help me how to do this, I have tried it using the redux and created new file, but that’s not working.

Tags:

2

Answers


  1. 0

    Pass the callback function as a prop to the child

    Parent Component

    import React from 'react';
import Child from './Child'
class App extends React.Component {
 
    state = {
        name: "",
    }
 
    // Callback function to handle data received from the
    //child component
    handleCallback = (childData) => {
        // Update the name in the component's state
        this.setState({ name: childData })
    }
 
    render() {
        const { name } = this.state;
        return (
            <div>
                <Child parentCallback={this.handleCallback} />
                {name}
            </div>
        )
    }
}
export default App

    Child Component

    import React from 'react'
class Child extends React.Component {
    // Function triggered when the form is submitted
    onTrigger = (event) => {
        // Call the parent callback function
        this.props.parentCallback(event.target.myname.value);
        event.preventDefault();
    }
 
    render() {
        return (
            <div>
                <form onSubmit={this.onTrigger}>
                    <input type="text"
                            name="myname"
                            placeholder="Enter Name" />
                    <br></br><br></br>
                    <input type="submit" value="Submit" />
                    <br></br><br></br>
                </form>
            </div>
        )
    }
}
export default Child
    Login or Signup to reply.
  2. 0

    Passing props from child component to parent component is not possible. You can either pass a callback function as prop which gets an height arg and call that inside your Banner component’s useEffect function.

    useEffect(() => {
  props.handleImageHeight(imageHeight)
}, [imageHeight])

    Or you can just put that value in a global store (context, redux etc.) and read it there for other components that need that value. But for something like an image height. Passing a callback function and calling that is easier and less complex.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search