React.JS - передача данных от одного компонента к другому

Отказ от ответственности: я новичок в "React.JS".

Я пытаюсь получить значение от одного компонента, поэтому я могу использовать его в другом компоненте для отображения соответствующего содержимого. Компонент 1 перечисляет все шоу из моей базы данных. Компонент 2 имеет информацию о каждом конкретном шоу на отдельной странице. Я хочу сделать это без жесткого кодирования, так как это можно охарактеризовать как не очень хороший подход.

Вот код:

Component1.JSX

import React, { Component } from 'react';
import './SecondPage.css';
import { Button, ButtonGroup, DropdownItem, DropdownMenu, DropdownToggle, ButtonDropdown } from 'reactstrap';
import Helmet from 'react-helmet';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Showing from '../Showing/Showing.jsx';


class SecondPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showingsList: [],
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){
    const self = this;
    axios.get('/api/loadShowings')
    .then(response => {
      var  showingsList  = response.data
   this.setState({ showingsList });

  }
    );

  }

  handleSubmit(){

  }

  render(){
    return(
      <div class = "grid-container1">
      {
        this.state.showingsList.map((showing) => {
          return <div showing = {showing} key = {showing.id}>
            <div class = "grid-item1 "><img width = "200px" height = "200px" src = {showing.image}/>
            <h3>{showing.title}</h3>
            <h5>{showing.description}</h5>
            <Link to = "/Showing">
            <Button  className = "btnShowings">MORE</Button>
            </Link>
        </div>







          </div>})
      }
      </div>
    )
  }
}

export default SecondPage;

Component2.JSX

import React, {Component} from 'react';
import './Showing.css';
import Helmet from 'react-helmet';
import {Button} from 'reactstrap';
import {Link} from 'react-router-dom';
import axios from 'axios';

class Showing extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          showingsList: [], 
        };

      }

      componentDidMount(){
        const self = this;
        axios.get('/api/loadShowings')
        .then(response => {
          var  showingsList  = response.data
       this.setState({ showingsList });
       console.info(showingsList["0"].title)


      }
        );

      }

    render(){
        return(
<div>

      {
        this.state.showingsList.map((showing) => {
          return <div showing = {showing} key = {showing.id}>


          <Helmet>
          <style>{'body { background-color: gray; }'}</style>
          </Helmet>


            <div class = "grid-container">
            <div class = "item1">{showing.title}</div>
            <div class = "item2"><img width = "200px" height = "200px" src = {showing.image}/></div>
            <div class = "item3">{showing.description}</div>  
            <div class = "item4"> <a href = "/Booking">
                    <Button bsStyle = "info" size = "lg">Make a booking</Button>
                    </a></div>

            </div>



          </div>})
      }

            </div>
        )
    }
}

export default Showing;

Я попробовал пару вещей, которые видел из различных руководств - используя this.props.state, но не смог заставить его работать, так как пример был сделан на основном файле JSX (App.js). Я также пробовал делать аксиомный пост и получать, но это становится настолько сложным. Я прошу совета, что использовать, поэтому мне не нужно создавать много разных страниц для каждого случая. Большое тебе спасибо!