Passing Data Between React Components

React is a JavaScript library for building user interfaces. React utilizes reusable components. This allows you to reuse your code, control how the components update, and control how they communicate with each other.

Props

Props allows us to pass data between React components. We can pass callback functions and other pieces of data. We can attach multiple props to each component. Passing props and accessing them is very simple. Lets look at some examples.

function Home(){
   return(<div>
      <Greeting/>
   </div>)
}

Above we have a functional component Home that renders a second function component Greeting. Right now this is just a simple render. There is no passing of information between the two components.

Parents and Children

To understand how props work, we must first understand the relationship between parent and children components. React allows you to pass props but only down the family tree. A parent can only pass information to the children. Children can not pass props up to the parent. This is the one way data flow of React. It will always pass props down the component hierarchy unless your use a separate state manager like Redux. Redux is a topic for a different article.

Passing Props

function Home(){
   return(<div>
      //passing name prop to greeting component
      <Greeting name=‘Tripp’/>
   </div>)
}

function Greeting(props){
   return(<div>
    //using prop passed down
    <p>Hi there {props.name}</p>
   </div>

In order to pass a prop to a component all we have to do is name the prop and set it equal to some value. In the example above, we are passing a prop called name that is equal to a string. Passing a prop gives us access to the information in our Greeting component. To access the prop in our functional component we use props.name. (If this was a Class component we would use this.props.name. props.(name of prop being passed) will give us access to our prop just like an argument of a function.

Callbacks

Remember that React is a one way data flow. We can only pass props from parents to children. What if we have some logic that happens in our children component and we want it to change data in our parent component? We can do this by using callback functions. Props allows us to not only pass data but we can also pass functions as a prop. When we use this callback function in our children component it can then preform actions that will effect our parent component.

function Home(){
   //useState establishes state in a functional component
   let [showSecret, setShowSecret] = useState(0)
   return(<div>
      <Greeting name=‘Tripp’ displaySecrete={setShowSecret}/>
      {/* will show a message once state is true */}
      {showSecret ? <p>Secret: You just went Against the Flow</p> : <p></p>}
   </div>)
}

function Greeting(props){
   return(<div>
      <p>Hi there {props.name}/>
      {/*clicking button will update state of the parent component and show the secret in the parent component */}
      <button onClick={()=> props.displaySecrete(1)>Show Secret</button>
   </div>)
}

Summary

React has a one way data flow. Parent components pass props down to its children. Children components can not pass props up to their parent component.

The Passing of callback functions as a prop allows children components to make changes in their parent component.

When ever a prop is updated it will trigger a re render.

Pass in props when you initialize your component. <Greeting name=‘Tripp’ /> The Prop is called name with the value of ‘Tripp’

To access a prop in the the children component: props.name

I hope this short and sweet article on props was helpful. These are simple examples of passing data between components. Once you’ve master this you will be able to quickly enhance the data flow among your components and make more complex applications.