Passing data between two sibling React.js components

Question

I have two instances of a component (a search field) on a page, with a second component (a button that makes server calls) between them, as such:

Answer 1

As of 2020, Feb; Context API is the way to handle this:

// First you need to create the TodoContext


// Todo.jsx
//...
export default () => {
  return(
    <>
      
        
        
      
    
  )
}

// Now in your TodoList.jsx and TodoCalendar.jsx; you can access the TodoContext with:
//...
const todoContext = React.useContext(TodoContext);
console.log(todoContext)
//...
//...

Check this video tutorial by The Net Ninja for Hooks & Context API

Good Luck...