title: Pass values from one component to another
body: <p>I have the following 2 files where I need to pass value of the state variable checkedPpl from one component to another. I am learning React and any pointers would be of great help.</p>
  <p>This particular project,  I am selecting a few names of people through checkboxes in FriendsList and want to pass those values to the FriendTagged component. I understand that I need to store those values as state variables in FriendsList and pass those to FriendTagged as props. Kindly suggest how this can be achieved.</p>
  <p><strong>FriendsList.jsx</strong></p>
  <pre><code>import React, { Component, useState } from 'react';
  import SampleImg from '../assets/SampleImg.jpg';
  import styled from 'styled-components';
  import {Link} from 'react-router-dom';
  //import { BrowserRouter as Router, Route, Switch,withRouter,useHistory } from 'react-router-dom'
  import PeopleDataService from '../service/PeopleDataService';
  import Checkbox from './Checkbox';
  import FriendTagged from './FriendTagged';
  import PassValues from '../PassValues';
  //import Navbar from './Navbar';
  
  
  
  
  
  const Button=styled.button`
  
  background-color:#3949ab;
  color:white;
  padding:5px 15px;
  border-radius:5 px;
  outline:0;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0px 2px 2px lightgray;
  `
  const ListComp = {
      width: &quot;300px&quot;,
      margin: &quot;30px auto&quot;,
      backgroundColor: &quot;#44014C&quot;,
      minHeight: &quot;200px&quot;,
      boxSizing: &quot;border-box&quot;
     }
  
     const linkStyle = {
      margin: &quot;1rem&quot;,
      textDecoration: &quot;none&quot;,
      color: '#800020',
      backgroundColor: &quot;#CFB997&quot;
    };
  
     
     
  
  
  class FriendsList extends Component {
  
      constructor(props) {
          super(props)        
          this.state = {
              isLoading:false,
              people: [],
              redirect:false,
              checkedPpl: []
              
          }
          
         console.log(&quot;inside constructor &quot;+this.props)
          this.addFriendClicked = this.addFriendClicked.bind(this)
          this.refreshPeople = this.refreshPeople.bind(this)
          this.deleteFriendClicked=this.deleteFriendClicked.bind(this)
          //this.clickMe=this.clickMe.bind(this); 
          
      }
      addFriendClicked() {
          PeopleDataService.addFriendClicked()
         // this.props.history.push(`/save`)
      }
      componentDidMount() {
          this.refreshPeople();
          this.selectedCheckboxes = new Set();
          
          //this.setState({ people: body, isLoading: true });
          
      }
      deleteFriendClicked(){
          PeopleDataService.deleteFriendClicked()
      }
      refreshPeople() {
          
          this.setState({people: [&quot;Jack&quot;,&quot;Jill&quot;,&quot;Louis&quot;,&quot;Emily&quot;,&quot;Donald&quot;,&quot;Holly&quot;] })
             // alert(response.data);
      }
      
  
     /* refreshPeople() {
          PeopleDataService.retrieveAllFriends()//HARDCODED
              .then(
                  response =&gt; {
                      console.log(response.headers);
                      this.setState({ people: response.data })//[&quot;Subin&quot;,&quot;Fiona&quot;,&quot;Evana&quot;]
                      //alert(response.data);
                  }
              )
             // alert(response.data);
      }*/
      toggleCheckbox = label =&gt; {
          console.log(&quot;Inside toggle checkbox &quot;+label+this.selectedCheckboxes)
          if (this.selectedCheckboxes.has(label)) {
            this.selectedCheckboxes.delete(label);
          } else {
            this.selectedCheckboxes.add(label);
          }
          this.setState({checkedPpl:[label]})
          //console.log('checkedPpl '+ &quot;***&quot; +label+&quot;((((&quot;+this.checkedPpl)
          console.log(this.state);
        }
      
        handleFormSubmit = formSubmitEvent =&gt; {
          formSubmitEvent.preventDefault();
          
      
          for (const checkbox of this.selectedCheckboxes) {
            console.log(checkbox, 'is selected.');
          }
        
        
          //this.setState({ redirect: true })
        }
      
       /*onSubmit = () =&gt; {
          {this.handleFormSubmit()};
          console.log(&quot;Inside onSubmit&quot;)
              this.props.history.push('/FriendTagged');
          
       }*/
  
        
        createCheckbox = label =&gt; (
          &lt;Checkbox
            label={label}
            handleCheckboxChange={this.toggleCheckbox}
            key={label}
          /&gt;
        )
      
        createCheckboxes = () =&gt; (
          this.state.people.map(this.createCheckbox)
        )
     
      
  
      render() {
        const {checkedPpl} = this.state;
        console.log(&quot;Parent value &quot;+checkedPpl);
          return (       
              
             
                                    
                      &lt;div className=&quot;container&quot;&gt;
                          
          &lt;h3 style={{ padding: &quot;10px 20px&quot;, textAlign: &quot;center&quot;, color: &quot;#44014C&quot;}}&gt;Amigos  &lt;/h3&gt;
          &lt;div className=&quot;imgContainer&quot;&gt;
          &lt;h6 style={{ padding: &quot;10px 20px&quot;, textAlign: &quot;center&quot;, color: &quot;#FF00FF&quot;}}&gt;Choose friends to tag on the photo&lt;/h6&gt;
          
          
         &lt;p&gt;&lt;/p&gt;
  
  
          
          &lt;/div&gt;
  
          &lt;div className=&quot;tableContainer&quot;&gt;
          &lt;img src={SampleImg} width=&quot;250&quot; height=&quot;200&quot;/&gt;
           &lt;form onSubmit={this.handleFormSubmit} onChange={(e) =&gt; { this.setState({ checkedPpl:this.state }) }}&gt; 
          &lt;table className=&quot;table&quot;&gt;
              
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  
                                  &lt;th&gt;Name&lt;/th&gt;
                                  
                                  
                              &lt;/tr&gt;
                              
                          &lt;/thead&gt;
                          &lt;tbody &gt;
                          {
                              
                                  
                                            
                                               &lt;tr&gt;                                     
                                              {
                                              this.createCheckboxes()
                                              
                                              }
                                              &lt;Link to=&quot;/component/FriendTagged&quot; className=&quot;btn btn-default&quot; style={linkStyle} type=&quot;submit&quot;&gt;Tag&lt;/Link&gt;
                                              
                                              
                                             
                                              &lt;/tr&gt; 
                                          
                                         /* &lt;tr &gt; This displayed Tag and Remove buttons w/o names of people                                          
                                          &lt;td&gt;{person.name}&lt;/td&gt;
                                          &lt;td&gt;&lt;button className=&quot;button btn-success&quot; onClick={() =&gt; this.addFriendClicked(person.id)}&gt;Tag&lt;/button&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;button className=&quot;btn btn-warning&quot; onClick={() =&gt; this.deleteFriendClicked(person.id)}&gt;Remove&lt;/button&gt;&lt;/td&gt;
                                      &lt;/tr&gt;*/
                                          /*&lt;tr key={person.id}&gt;                                            
                                          &lt;td&gt;{person.name}&lt;/td&gt;
                                          &lt;td&gt;&lt;button className=&quot;button btn-success&quot; onClick={() =&gt; this.addFriendClicked(person.id)}&gt;Tag&lt;/button&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;button className=&quot;btn btn-warning&quot; onClick={() =&gt; this.deleteFriendClicked(person.id)}&gt;Remove&lt;/button&gt;&lt;/td&gt;
                                      &lt;/tr&gt;*/
                                  
                              }
                            
                          &lt;/tbody&gt;
                          
                      &lt;/table&gt;
                      &lt;/form&gt;   
                      &lt;/div&gt;
          
                  
                      
                  &lt;/div&gt;
                      
              
          )
      }
  
      
  }
  
  export default FriendsList
  </code></pre>
  <p><strong>FriendTagged.jsx</strong></p>
  <pre><code>import React, { Component } from 'react';
  import FriendsList from './FriendsList';
  import sampleImg from '../assets/SampleImg.jpg';
  
  class FriendTagged extends Component {
      
     
  
      render() {
          
          return (
              &lt;div className=&quot;container&quot;&gt;
      &lt;h3 style={{ padding: &quot;10px 20px&quot;, textAlign: &quot;center&quot;, color: &quot;#44014C&quot;}}&gt;Tagged Together&lt;/h3&gt;
          &lt;img src={sampleImg} width=&quot;250&quot; height=&quot;200&quot;/&gt;
          
          &lt;h6 style={{ padding: &quot;10px 20px&quot;, textAlign: &quot;center&quot;, color: &quot;#FF00FF&quot;}}&gt;Friends tagged on this photo are:&lt;/h6&gt;
          {this.props.data}
          
          
          &lt;/div&gt;
          
          )
      }
  }
  
  export default FriendTagged
  </code></pre>