title: How can I pass the state from one component to another and how can I modify the state?
body: <p>So I have </p>
  
  <p>one component called section.js: </p>
  
  <pre><code>import React from 'react';
  
  import SectTitle from './Section_Title/Section_Title.js'
  import SectContent from './Section_Content/Section_Content.js'
  
  import classes from './Section.module.css'
  
  const section = (props) =&gt; {
      const sectionNameMapping = {
          profile: 'Profile',
          education: 'Education',
          relevantWorkExp: 'Relevant Work Experience',
          otherWorkExp: 'Other Work Experience'
      }
  
      return (
          &lt;div className={classes.Section}&gt;
              &lt;SectTitle title={sectionNameMapping[props.sectionName]} /&gt;
              &lt;SectContent sectionName={props.sectionName}/&gt;
          &lt;/div&gt;
      )
  }
  
  export default section;
  </code></pre>
  
  <p>SectionTitle.js </p>
  
  <pre><code>import React,{Component} from 'react';
  
  import classes from './Section_Title.module.css'
  
  import expandArrow from '../../../assets/png_files/expand_arrow.png'
  
  class SectTitle extends Component {
      state = {
          arrowClicked: false
      }
  
      displaySectionContents = () =&gt; {
          console.log('[displaySectionContents] Executed ... ' + this.state.arrowClicked)
          this.setState({
              arrowClicked: !this.state.arrowClicked
          })
      }
  
      render(){
      return (
          &lt;div className={classes.SectionTitle}&gt;
              &lt;div&gt;{this.props.title}&lt;/div&gt;
              &lt;div&gt;
                  &lt;button
                   className={classes.ButtonSectTitle} 
                   onClick={this.displaySectionContents}&gt;
                       &lt;img className={classes.ExpandArrow} 
                        src={expandArrow} 
                        style={{transform: this.state.arrowClicked ? 'rotate(0deg)' : 'rotate(-90deg)'}}/&gt;&lt;/button&gt;&lt;/div&gt;
             &lt;/div&gt;
      )}
  }
  
  export default SectTitle;
  </code></pre>
  
  <p>SectionContent.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import SectionItem from './Section_Item/Section_Item.js'
  
  import classes from './Section_Content.module.css'
  
  class SectionContent extends Component {   
      render() {
          return (
          &lt;div className={classes.SectionContent}&gt;
              &lt;SectionItem sectionName={this.props.sectionName}/&gt;
          &lt;/div&gt;
          )
      }
  }
  
  export default SectionContent;
  </code></pre>
  
  <p>and SectionItem.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import classes from './Section_Item.module.css';
  
  import jsonContent from '../../../../assets/json_files/json_content.json';
  
  
  class SectionItem extends Component {
      render() {
          if (Object.keys(jsonContent).includes(this.props.sectionName) &amp;&amp; (this.props.sectionName == 'profile')) {
              return &lt;div&gt;{jsonContent[this.props.sectionName]}&lt;/div&gt;
          } else {
              return &lt;div&gt;test&lt;/div&gt;
          }
      }
  }
  
  export default SectionItem;
  </code></pre>
  
  <p>I need to set the state in the sectionTitle where my expand arrow is and the section content be displayed or not based on whether the button has been pressed or not. </p>
  
  <p>I am new to react and I don't know how o do this</p>