score:0

Accepted answer
const SectTitle = (props) {
    return (
        <div className={classes.SectionTitle}>
            <div>{props.title}</div>
            <div>
                <button
                 className={classes.ButtonSectTitle} 
                 onClick={props.displaySectionContents}>
                     <img className={classes.ExpandArrow} 
                      src={expandArrow} 
                      style={{transform: props.arrowClicked ? 'rotate(0deg)' : 'rotate(-90deg)'}}/></button></div>
           </div>
    )}
}

score:0

const section = (props) => {
 const [arrowClicked, setArrowClicked] = useState(false)

 return (
        <div className={classes.Section}>
            <SectTitle displaySectionContents={() => setArrowClicked(true)} title={sectionNameMapping[props.sectionName]} />
            <SectContent arrowClicked={arrowClicked} sectionName={props.sectionName}/>
        </div>
    )

class SectTitle extends Component {
    state = {
        arrowClicked: false
    }

    return (
        <div className={classes.SectionTitle}>
            <div>{this.props.title}</div>
            <div>
                <button
                 className={classes.ButtonSectTitle} 
                 onClick={this.props.displaySectionContents}>
                     <img className={classes.ExpandArrow} 
                      src={expandArrow} 
                      style={{transform: this.state.arrowClicked ? 'rotate(0deg)' : 'rotate(-90deg)'}}/></button></div>
           </div>
    )}

class SectionContent extends Component {   
    render() {
        // this.props.arrowClicked
        return (
        <div className={classes.SectionContent}>
            <SectionItem sectionName={this.props.sectionName}/>
        </div>
        )
    }
}

Related Query

More Query from same tag