Passing props between components

Question

Good morning, in a scenario with 3 components, being Casecard, Casepage and Portfolio, where Casecard is a card that I declare within Portfolio with the image, title and description that I want, and Casepage must be the specific page of the clicked Casecard. I can not transfer the props of the clicked component to Casepage, as there are several can not only export each component.

On my router I have the route:

<Route path="/casepage" component={CasePage} />

Casecard:

import React from 'react'
import './CaseCard.css'

export default props => (

<div className="col-4 img__wrapcase pointer">
  <img src={props.src} className="img-fluid" alt={props.alt}/>
  <div className="img__description_layercase">
    <div className="img__descriptioncase">
      <h4 className="nomargin">{props.cliente}</h4>
      <hr className="colorwhite"></hr>
      <h6>{props.campanha}</h6>
    </div>
  </div>
</div>
)

Portfolio:

import React from 'react'
import './CaseCard.css'
import CaseCard from './CaseCard'
class Portfolio extends React.Component {
  render() {
    return (
    <div className="container portfolio">
       <CaseCard
           src="exp.jpg"
           alt="exemplo"
           cliente="fulano"
           campanha="loremipsumblablabal"
       /> 
       <CaseCard
           src="exp.jpg"
           alt="exemplo1"
           cliente="fulano"
           campanha="loremipsumblablabal"
       /> 

       <CaseCard
           src="exp.jpg"
           alt="exemplo2"
           cliente="fulano"
           campanha="loremipsumblablabal"
       /> 

       <CaseCard
           src="exp.jpg"
           alt="exemplo3"
           cliente="fulano"
           campanha="loremipsumblablabal"
       /> 
    </div>

    )
  }
}
export default Portfolio

Casepage:

import Portfolio from './Portfolio'
import React from 'react'

class CasePage extends React.Component{   

    render(props){
        return(
            <div className="container">
                <Portfolio/>
            </div>

        )
    }
}

export default CasePage

Answer 1

You can set a function in your Casepage and pass via prop or Context to the Casecard and when it is clicked you call the Casepage function.

Example:

import Portfolio from './Portfolio'
import React from 'react'

class CasePage extends React.Component{

    onCaseCardClick = () => {
        // Faça alguma coisa aqui
    }
    render(props){
        return(
            <div className="container">
                <Portfolio onCaseCardClick={this.onCaseCardClick}/>
            </div>

        )
    }
}

export default CasePage

class Portfolio extends React.Component {
  render() {
    return (
    <div className="container portfolio">
       <CaseCard
           src="exp.jpg"
           alt="exemplo"
           cliente="fulano"
           campanha="loremipsumblablabal"
           onClickCallback={this.props.onCaseCardClick}
       />
    </div>
    )
  }
}


export default props => (

<div onClick={() => props.onClickCallback()} className="col-4 img__wrapcase pointer">
  <img src={props.src} className="img-fluid" alt={props.alt}/>
  <div className="img__description_layercase">
    <div className="img__descriptioncase">
      <h4 className="nomargin">{props.cliente}</h4>
      <hr className="colorwhite"></hr>
      <h6>{props.campanha}</h6>
    </div>
  </div>
</div>
)