What is the best way to use external JSON file data as a props for landing-section in different pages?

Question

I am new to reactJS and I need an answer for this confusing problem.

I have a landing page that I want to use in my home and contact page. What I want is to send external JSON info as props to these pages and every time I create new page.

I have an external JSON file and I want to add it as a props to my landing page file What is the best practice to do so, should I save within a state and send it as a props or send it directly as a props

JSON File:

{

"landing page" : {
    "home": {
        "id":1,
        "image": "../media/video/Ai Motion5.mp4",
        "title" : "MyAkbar for IT consultant & Services",
        "description":"Boost up Your Works With our Services. My Incrediable Team is Here to Save Your Time and Money.",
        "buttonOne": "Get A Demo"
    },
    "Contact" : {
        "id":2,
        "image": "../media/video/Ai Motion5.mp4",
        "title" : "Contact",
        "description":"sdadasdskdjaskljdas Team is Here to Save Your Time and Money.",
        "buttonOne": "Get A Demo"
    }
}

}

Home file:

import React, { Component } from 'react'
import LandingPage from "./landingPage/LandingPage"
import WaveSection from './waveSection/WaveSection'
import MyReview from "./reviewSection/MyReview"
import './styles/style.css'
import data from '../../json/data.json';

class Home extends Component{


    render(){
        return(
            <div id='home' className='home'>
                <LandingPage 
                    title = {data['landing page'].home.title} 
                    img = {data['landing page'].home.image}
                    description ={data['landing page'].home.description}
                    btn = {data['landing page'].home.buttonOne}
                />
                <WaveSection/>
                <MyReview/>
            </div>
        )
    }
}

export default Home

Contact File:

import React, { Component } from 'react'
import video from '../../media/video/Ai Motion.mp4';
class Contact extends Component{
    render(){
        return(
            <section className='contact-section landingPage-section'>
                <div className="container">
            <video  autoPlay muted loop="True" id='myVideo' src={video}></video>
                </div>
            </section>
        )
    }
}

export default Contact

Answer 1

I will go with the first option (not storing it in state) as this data is static and the app does not modify it directly.