How to share the state between all my component?

Question

I currently have an App component, which is the parent to another component "Cart". I actually use React Router for the routing, and as such my code is :

class App extends Component { // (PARENT)
  state = {
    likedClass : ["1"]
  }

  render() {
    return (
      <Router>
        <div className="App">
        <Switch>
          <Route exact path="/cart" component={() => (<Cart likedClass={this.state.likedClass} /> )}/>
        </Switch></div></Router>)} // (etc...)

and a child component (cart)

class Cart extends Component {
  render() {
    return (
      <div className="Cart"> 
      <Header></Header>
      <section>
          <ul>
              {this.props.likedClass.map((course,index) =>  <CartComponent key={index} ID={course} />)}
          </ul>
      </section>
      <Contact></Contact>
      <Footer></Footer>
      </div>
    )
  }
}

export default Cart;

My problem is when I update my state in my App component, my Cart component does not see any change (I change the state with some functions in another children "Course" not shown here for clarity). I used the React debogger to see that my App state indeed changes when I press the button in my "Course" Children, but still using the React debogger, the state of my Cart never changes and is always showing the initial state..

I am pretty new to React, what am I doing wrong ? Thanks!

Edit :

As asked, the code I use to change the state is in my "course" component, to which I pass a function as a prop, so in my Course component I have :

<button onClick={(e) => {this.props.addLike(course.id)}} className="btn btn-secondary module__button"> LIKER LE COURS</button>

and the function "addLike" is passed through props in the App component as such :

data_cours.map( (card,id) => {
      return (<Route exact path={`/${card.categorie}/${card.id}`} key={id} component={() => <Course 
         id={`${card.id}`}
         addLike={this.addLikedClassHandler}
          />}  />) 
  } )
  }

I think you're changing the state of Course Component not the state of the App Component. Can you share the code in which you're changing the state? — Terminat, May 29 '20 at 11:10
Yes. Just for your information. I did manage to make it work with the "local storage" package. But it is obviously not the best. I will edit my post to show what you ask — Dyhawxyde, May 29 '20 at 11:22
@Dyhawxyde, if you update state of App Component and if you want to get that update on the child component then you have to pass that state to child as a props — Khabir, May 29 '20 at 11:24
Also, you shouldn't use a function that is returning a component inside component={} prop for performance reasons. Instead use render={} here. For further reading I'll leave you this link: https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render — Terminat, May 29 '20 at 11:38

score 0 · Accepted Answer · answered May 29 '20 at 11:49

may be you missed something. Please check this example. it works perfectly.

App Component

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Switch, Route,} from "react-router-dom";
import history from "./history";
import HelloComponent from "./HelloComponent";

class App extends React.Component {
    state = {
        likedClass: ["khabir"]
    };

    render() {
        return (
            <div>
                <Router history={history}>
                    <Switch>
                        <Route exact path="/hello"
                               component={() => (<HelloComponent likedClass={this.state.likedClass} />)}/>
                    </Switch>
                </Router>
            </div>
        )
    }
}

export default App;

history.js

import {createBrowserHistory} from "history";

export default createBrowserHistory();

Hello Component

import React from "react";

export default function HelloComponent({likedClass}) {

    return (
        <div>
            <ul>
                {likedClass}
            </ul>
        </div>
    );
}

Great, thanks! I needed to use the file storage module in any case, but thanks for the help! — Dyhawxyde, Jun 01 '20 at 14:53

How to share the state between all my component?

1 Answers1