Как получить нужное значение из JSON с помощью props?

{
  "id": 1,
  "menu_item_1": "Головна",
  "menu_item_2": "Бісквітні торти",
  "menu_item_3": "Макаронс",
  "menu_item_4": "Кенді бар",
  "menu_item_5": "Мусові торти",
  "town": "м.Біла Церква",
  "updated_by": {
    "id": 1,
    "username": null
  },
  "created_at": "2020-09-16T09:00:34.170Z",
  "updated_at": "2020-09-20T18:15:55.660Z",
  "cost_small": "Ціна",
  "cost_medium": "Ціна",
  "cost_large": "Ціна",
  "cost_extraLarge": "Ціна",
  "slider_prod_image_1": "/img/slider-one-img-1.png",
  "slider_prod_image_2": "/img/slider-one-img-2.png",
  "slider_prod_image_3": "/img/slider-one-img-3.png",
  "slider_prod_image_4": "/img/slider-one-img-4.png",
  "comment": {
    "slider_review_alt": "Аватар",
    "slider_review_info": "Ваш тортик смачнющий Іріш, ти майстер своєї справи!!! Ми родиною не один раз замовляли в тебе смаколики і ну дуууже задоволені завжди!!! Дякуємо тобі за красу, смакоту і креативність.",
    "slider_review_name": "Анастасія",
    "slider_review_avatar": "/img/section-reviews-slider-img.png"
  }
}

import React from "react";
import {
  BrowserRouter,
  Route
} from "react-router-dom";
import Nav from '../Nav/Nav';
import MainPage from '../ComponentsPages/MainPage/MainPage';
import MousseCakes from '../ComponentsPages/MousseCakes/MousseCakes'
import Macarons from '../ComponentsPages/Macarons/Macarons';
import CandyBar from '../ComponentsPages/CandyBar/CandyBar';
import SpongeCakes from '../ComponentsPages/SpongeCakes/SpongeCakes';
import Footer from '../Footer/Footer';

class App extends React.Component {

    state = {
      strap: [],
      error: null
    }

    componentDidMount = async() => {
      const parseJSON = (resp) => (resp.json ? resp.json() : resp);
      const checkStatus = (resp) => {
        if (resp.status >= 200 && resp.status < 300) {
          return resp;
        }
        
        return parseJSON(resp).then((resp) => {
          throw resp;
        });
      };
      
      const headers = {
        'Content-Type': 'application/json',
      };
      
      try {
        const strap = await fetch('https:///settings/1', {
            method: "GET",
            headers: headers,
          }).then(checkStatus)
          .then(parseJSON);
        this.setState({
          strap
        });
      } catch (error) {
        this.setState({
          error
        })
      }
    }
    
    render() {
        const {
          error,
          strap
        } = this.state
        
        if (error) {
          return <div > An error occured: {
            error.message
          } < /div>
        }

        const json = require('../json/settings.json');
        const json_size_slider = require('../json/size_slider.json');
        const json_card_sponge_cakes = require('../json/card_info_sponge_cakes.json');
        const json_card_mousse_cakes = require('../json/card_info_mousse_cakes.json');

        return ( 
        <BrowserRouter>
            <Nav data_nav = {json[0]} data_settings = {strap} /> 
            <Route path = '/'
            component = {
              (props) => < MainPage data_main = {json[0]}
              data_settings = {strap} />
            } 
            exact={true} / >
              <Route path = '/page_1'
              component = {
                (props) => < SpongeCakes data_spong = {
                  json[0]
                }
                data_slider = {
                  json_size_slider[0]
                }
                data_card = {
                  [json_card_sponge_cakes]
                }
                data_settings = {
                  strap
                }
                />} / >
                <
                Route path = '/page_2'
                component = {
                  (props) => < Macarons data_macaron = {
                    json[0]
                  }
                  data_slider = {
                    json_size_slider[0]
                  }
                  data_settings = {
                    strap
                  }
                  />} / >
                  <
                  Route path = '/page_3'
                  component = {
                    (props) => < CandyBar data_candy = {
                      json[0]
                    }
                    data_settings = {
                      strap
                    }
                    />} / >
                    <
                    Route path = '/page_4'
                    component = {
                      (props) => < MousseCakes data_mousse = {
                        json[0]
                      }
                      data_slider = {
                        json_size_slider[0]
                      }
                      data_card = {
                        [json_card_mousse_cakes]
                      }
                      data_settings = {
                        strap
                      }
                      />} / >
                      <
                      Footer data_footer = {
                        json[0]
                      }
                      data_settings = {
                        strap
                      }
                      /> <
                      /BrowserRouter>
                    );
                  }
                }

export default App;

import React, {
  Component
} from "react";
import SliderReviews from "react-slick";
import './sliderReviews.scss';

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      autoplaySpeed: 4000,
      autoplay: true,
      responsive: [{
          breakpoint: 1199,
          settings: {
            infinite: true,
            dots: true,
            arrows: false
          }
        },
        {
          breakpoint: 992,
          settings: {
            infinite: true,
            dots: true,
            arrows: false
          }
        },
        {
          breakpoint: 768,
          settings: {
            infinite: true,
            dots: true,
            arrows: false
          }
        },
        {
          breakpoint: 576,
          settings: {
            infinite: true,
            dots: true,
            arrows: false
          }
        }
      ]
    };
    return ( <
      div className = "slider-two__row" >
      <
      SliderReviews { ...settings
      } >
      <
      div className = "slider-two__item col-12" >
      <
      div className = "row" >
      <
      img className = "slider-two__item-img col-xl-4 col-lg-4 col-sm-5 col-9"
      src = {
        this.props.info_strap.comment.slider_review_avatar
      }
      alt = {
        this.props.review.slider_review_alt
      }
      /> --->> ПЫТАЮСЬ ПОЛУЧИТЬ ТУТ  <
      div className = "slider-two__text col-xl-8 col-sm-7" >
      <
      p className = "slider-two__item-name" > {
        this.props.review.slider_review_name
      } < /p> <
      p className = "slider-two__item-text" > {
        this.props.review.slider_review_info
      } < /p> <
      /div> <
      /div> <
      /div> <
      div className = "slider-two__item col-12" >
      <
      div className = "row" >
      <
      img className = "slider-two__item-img col-xl-4 col-lg-4 col-sm-5 col-9"
      src = {
        this.props.review.slider_review_avatar
      }
      alt = {
        this.props.review.slider_review_alt
      }
      /> <
      div className = "slider-two__text col-xl-8 col-sm-7" >
      <
      p className = "slider-two__item-name" > {
        this.props.review.slider_review_name
      } < /p> <
      p className = "slider-two__item-text" > {
        this.props.review.slider_review_info
      } < /p> <
      /div> <
      /div> <
      /div> <
      div className = "slider-two__item col-12" >
      <
      div className = "row" >
      <
      img className = "slider-two__item-img col-xl-4 col-lg-4 col-sm-5 col-9"
      src = {
        this.props.review.slider_review_avatar
      }
      alt = {
        this.props.review.slider_review_alt
      }
      /> <
      div className = " slider-two__text col-xl-8 col-sm-7" >
      <
      p className = "slider-two__item-name" > {
        this.props.review.slider_review_name
      } < /p> <
      p className = "slider-two__item-text" > {
        this.props.review.slider_review_info
      } < /p> <
      /div> </div> </div> </SliderReviews> </div>
    );
  }
}