CODEWITHSUNDEEP
reactjs
Vamsi
Vamsi

Reputation: 392

How to pass an Function from Parent to Child in React

I am working on a React project, In that I have App.js this is Parent component. And I have

Another component that is Child.js this component is Child for App.js.

I Child.js I have one button for that I have written one function that is when someone clicks the

Button it's background color will change. I have written that in Child.js component and applied

To that Button. Now I have to change Child.js Button Text color, for that I have written one

function in App.js and I am trying to pass that function to Child.js. But I am unable to get

Output so Please help me to get output.

This is App.js

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  const [textColor, setTextColor] = useState('');

  const changeTextColor = () => {
    setTextColor('yellow')
  }

  return (
    <div className="App">
      <Child Fun={changeTextColor}></Child>
    </div>
  );
}

export default App;

This is Child.js

import React, { useState } from 'react';
import './Child.css';

const Child = (props) => {
    console.warn(props)
    const [bg, setBg] = useState('')
    const color = () => {
        setBg('red')
    }
    return(
        <div>
            <button className='btn btn-primary'
            style={{background: bg}}
             onClick={() => {color(); props.Fun()}}>Child Button</button>
       </div>
  )
}

export default Child

Upvotes: 0

Views: 695

Answers (3)

joy08
joy08

Reputation: 9662

You have to pass a prop to the child component regarding the color change. I see in your case, no prop is being sent to the child .

https://codesandbox.io/s/access-child-component-method-react-hook-olmco?file=/src/Child.js:0-445

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

function Parent() {
  const [textColor, setTextColor] = useState("");

  function changeTextColor() {
    setTextColor("blue");
  }

  return (
    <div className="App">
      <Child Fun={changeTextColor} textColor={textColor} />
    </div>
  );
}

export default Parent;

import React, { useState } from "react";

const Child = props => {
  const [bg, setBg] = useState("");
  const color = () => {
    setBg("red");
  };
  return (
    <div>
      <button
        className="btn btn-primary"
        style={{ color: props.textColor, background: bg,  }}
        onClick={() => {
          color();
          props.Fun();
        }}
      >
        Child Button
      </button>
    </div>
  );
};

export default Child;

Upvotes: 1

Lu&#239;s
Lu&#239;s

Reputation: 2853

You are passing down and using your function correctly. If you would log textColor in App.js you would see that the color did in fact update.

The problem is, you are currently not using your textColor variable anywhere so you don't see the change. Pass down textColor to your child as wel and use it somewhere to see the change visually.

(Note: In this scenario I'd keep your textColor state in your child component instead of the App)

Upvotes: 0

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

You're not using the textColor state anywhere. My guess is you want to use it this way:

const [textColor, setTextColor] = useState('white');

<Child textColor={textColor} Fun={changeTextColor}></Child>

and in the child component:

    <div>
        <button className='btn btn-primary'
        style={{background: bg, color: props.textColor }}
         onClick={() => {color(); props.Fun()}}>Child Button</button>
   </div>

Upvotes: 1

Related Questions