Been studying for Frontend React interviews the past few weeks should I get one and came across a question from the guide I was using and honestly got confused because I know of passing data from Parent to child since React is unidirectional and when doing that Vice versa, passing data from child to parent you use either the Context API for or state management libraries like Redux, Mobx or Recoil, FYI I am only familiar with Redux but found an interesting answer to the question since the question said not to use either Context API or Redux or any state management library so after googling and the regular Stackoverflow, reading some medium articles and reading the React Docs a little I found out you can actually pass data from child to parent using CALLBACKS.

I was confused at first then I remembered according to MDN docs:
A callback function is a function passed into another function as an argument. This call back function is then invoked inside the outer function to complete some kind of routine or action.

Procedure

There are basically two steps to achieve this process and I will be listing them and creating a component as we go

• Creating a Parent component and then creating a callback function in the parent component

function ParentComponent() {
  const [team, setTeam] = useState("");

This here is the callback function that will be passed as a prop to the childcomponent
  const addTeam = (team) => {
    setTeam(team)
  }

  return (
     <>
    <h3>This is the Parent Component that we 
        will be focusing on
    </h3>
    <h1>Your selected team is {team} </h1>
Below, the addTeam function is then passed into the child component as a prop
    <ChildComponent addTeam={addTeam}/>
     </>
  );
}

• Creating structure of the ChildComponent

const ChildComponet = ({ addTeam }) => {
The addTeam function will then be used to push the data(team) selected back to the ParentComponent
  const teams = ['LA Clippers', 'Boston Celtics', 'Cleveland Cavilers', 'Memphis Grizzlies'];

  return (
    <div>
      <h3>Choose Your Team in the child 
          component
      </h3>
      <ul>
        {teams.map(team, index => {
          return (
            <li key={index} onClick={() => addTeam(base)}>
              {team}</span>
            </li>
          )
        })}
      </ul>
      )}
    </div>
  )
}

• In the ChildComponent we simply used an onClick property to handle user click and then the data clicked is passed to the parent component and your selected team is displayed on your screen, the action is thereby complete.

Conclusion

Data has successfully been passed from the ChildComponent to to the ParentComponent and the unidirectional flow of react is beaten. If you feel I made a mistake, kindly hit me to tell me what I missed, thanks for reading.