Trying to pass props and state to a child component

Question

I have a parent functional component and i need to pass props and state to a child functional component, i have managed to pass only one of theme (props or state), the code below displays the fetched data, firstly i've been using const Footer = ({name, adresse, phone}) => {} and then i've replaced it with const Footer = (props) => {} i thought i can pass them this way!!

{props.colorScheme} is accessible in App.js but not in Footer component, should i use context API to pass the props? FYI, here is my index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const colorScheme = root_el.getAttribute("color-scheme");

ReactDOM.render(
    <App customBackground={customBackground} colorScheme={colorScheme} />,
    root_el
);

My App component

import React, {useEffect, useState, Suspense, lazy } from 'react';
import axios from 'axios';
import Footer from "./components/Footer";

const App = (props) => {

    const [infos, setInfos] = useState({});

    useEffect( () => {
        loadData();
    }, []);

    const loadData = () => {

        axios.get(`https://api`)
        .then((res) => {
            console.log(res.data);
            const infs = setInfos(res.data);
        });
    }
    return (
        <div>
            <Footer name={infos.name} adresse={infos.adresse} phone= {infos.phone}
        </div>
    )
};

export default App;

My child component :

import React from 'react';

const Footer = (props) => {
   const {name, adresse, phone} = props;
   return (
   <div>
       <h3>{props.colorScheme}</h3>
       <span>{name}<span>
       <span>{adresse}<span>
       <span>{phone}<span>
   </div>
   )
}
export default Footer;

Answer 1

You can continue to pass the props down to the footer component or you can, as you point out, use a context. Passing the colorScheme via the props is shown below.

Note: Your code was displaying the colorScheme as an h3 in the Footer and I left that as is.

Updated App Component:

import React, {useEffect, useState, Suspense, lazy } from 'react';
import axios from 'axios';
import Footer from "./components/Footer";

const App = (props) => {
    const [infos, setInfos] = useState({});
    const { colorScheme } = props;
    useEffect( () => {
        loadData();
    }, []);

    const loadData = () => {

        axios.get(`https://api`)
        .then((res) => {
            console.log(res.data);
            const infs = setInfos(res.data);
        });
    }
    // Footer tag below was missing the tag's closing
    // Added colorScheme prop
    return (
        <div>
            <Footer 
              colorScheme={colorScheme} 
              name={infos.name} 
              adresse={infos.adresse} 
              phone= {infos.phone}/> 
        </div>
    )
};

export default App;

Updated Footer

import React from 'react';

const Footer = (props) => {
   const {name, adresse, phone, colorScheme} = props;
   return (
   <div>
       <h3>{colorScheme}</h3>
       <span>{name}<span>
       <span>{adresse}<span>
       <span>{phone}<span>
   </div>
   )
}
export default Footer;

You can also create a new Context using createContext and useContext so that you can have a single way for all your components to access it. You won't have to pass the color scheme through props. You may want to do both so that you have a global set of default colors and then a prop that lets you override them.