Pass the data from child functional component to parent class component-CodePudding

I am quite new to react and I have been trying to figure out how to pass the data from child function to parent class component. In my child, I only have a variable that stores username from the URL. But I can't seem to figure out how to pass it to the parent component.

Here is my child.

const GetUsername = () => {
  const params = useParams();
  const [param, getParam] = useState(params.name);
  return <p>{params.name}</p>;
};
export blabla

I would like to know how I would have to access that params.name in my parent component. Here is my parent.

export class test extends Component {
  constructor(props) {
    super(props);
    this.data = React.createRef();
  }

  render() {
    console.log(this.data);
    return ({some code});
}

When I ran this, I got null. Thank you so much in advance for helping me!

CodePudding user response：

In React, Data flows in one direction only in form of props from Parent to Child. Either move the logic to fetch params name to parent and pass it to child as props or have a central data storage such as redux and dispatch an action from child to save the information there and fetch it from there in Parent.

CodePudding user response：

If you want to pass a child to parent component data then use usecontext or use redux to pass the data I recommend you can use redux.

CodePudding user response：

parent component is handling the state

import GetUsername from "./GetUserName"
import  { useState } from 'react'

const Test = () => {
  const [param, getParam] = useState('');
  console.log(param)

  return (
    <div>
     <GetUsername getParam={getParam}/>
    </div>
  )
}

export default Test

and the children GetUserName utilizes the getParam useState setter to set the state handled in its parent component Test

import { useEffect } from "react";
import { useParams } from "react-router-dom";

const GetUsername = ({getParam}) => {
  const params = useParams();

  useEffect(()=>{
    getParam(params)
  },[])
  
  return <p>children component</p>;
};

export default GetUsername

you will see that the console.log in the Test component will output your param received in its child component GetUserName.

in case you don't want to pass the props inline, you can use useContext, or redux, or any other state management library like zustand, recoil, etc...

CodePudding user response：

You can pass the setState hook as a prop from the parent to the child and when you have access to the data. Use the setState hook.

Parent Component:

export default function App() {
const [name, setName] = useState();
return (
    <div className="App">
        <h1>Hello {name}</h1>
        <Child setName={setName} />
    </div>
    );
}

Child Component:

export default function Child({ setName }) {

const [param, getParam] = useState("blabla");
useEffect(() => {
    setName(param);
}, []);
return (
    <>
        <input onChange={(e) => setName(e.target.value)} />
    </>
    );
}