I called my API and fetched the data on home page and I am using props to send data to child components of my home page. I can send the course-data to my grid component from the home page and it works fine. The issue is that when try to open my grid component from another component I have to send the course-data again using props which doesnot makes sense because some of the components are not related to the course-data but they still need to carry course-data so they can send it to my corse-grid component. (course grid component link is in my navbar which means every other page can access it. Now my question is that is there a way that I could set the data of my course-grid component at start when I make the initial API call and no matter what other components user open it from it still has sufficient information.
Below is my code for my homepage as you can see it renders the <Header/>, some other components do it too, So I am just wondering do i need to always pass data in props like I am doing here in
import React, { Component, useState} from 'react';
import Header from './components/Header';
import HeroSlider from './components/HeroSlider';
import IconBox from './components/IconBox';
import AboutUs from './components/AboutUs';
import CourseFilter from './components/CourseFilter';
import TestimonialSlider from './components/TestimonialSlider';
import FaqEvent from './components/FaqEvent';
import TeamSlider from './components/TeamSlider';
import HelpArea from './components/HelpArea';
import HomeBlog from './components/HomeBlog';
import CampusTour from './components/CampusTour';
import NewsletterForm from './components/NewsletterForm';
import Footer from './components/Footer';
export default class HomeOne extends Component {
state = {
courseData: null
}
componentDidMount() {
const request = async () => {
const response = await fetch('http://127.0.0.1:5000/')
const json = await response.json();
this.setState({ courseData: json })
console.log(json);
{console.log("This jsut happended")}
}
request();
}
render() {
if (!this.state.courseData) {
return <div />
}
return (
<div className="main-wrapper" >
{/* Header */ }
< Header courseInfo={this.state.courseData}/>
{/* Hero Slider */}
< HeroSlider />
{/* Icon Box */}
< IconBox />
{/* About Area */}
< AboutUs />
{/* Course Filter */}
< CourseFilter courseInfo={this.state.courseData}/>
{/* Testimonial Slider */}
< TestimonialSlider />
{/* Faq & Event Area */}
< FaqEvent />
{/* Team Slider */}
< TeamSlider />
{/* Help Area */}
< HelpArea />
{/* Blog Area */}
< HomeBlog />
{/* Newsletter Form */}
< NewsletterForm />
{/* Footer */}
< Footer />
</div >
)
}
}The answer is YES, if you don't use the concept called store. The code snippet that you have added explains how to pass data from the Parent to Child component. If you do not want to be passing data from the Parent to Child as you have done before, you should use redux's STORE to store the data globally which can be used to access data from anywhere and anytime.