context Api shows no value in the Consumer

Question

I started to study context api now, I believe I am making my code with the same structure as the tutorials, but the value target Component receives nothing, there is only a blank where it should have it.

import React, { Component } from 'react';

const CarContext = React.createContext();

function context(){
  return(
    <CarContext.Provider value='car'>
    </CarContext.Provider>
  );
}

function App(){
  return(
    <CarContext.Consumer>
      {value => (
        <p>a{value}</p>
      )}
    </CarContext.Consumer>
  )
}

export default App;

What is missing for the code to work?

Answer 1

I’m not sure I understood what you wanted to do, but how you must have studied, the Context.Provider passes the data to the child components through the Context.Consumer. In my vision, the Providershould be at the highest node of the component tree, which in case would be the App, and your code is changed. I made an example of code to help you.

const CarContext = React.createContext();

class CarComponent extends React.Component {
	render() {
	  return (
		<CarContext.Consumer>
		  {value => <p>My Car: {value}</p>}
		</CarContext.Consumer>
	  );
	}
}

class App extends React.Component {
	render() {
	  const value = "BMW";
	  return (
		<CarContext.Provider value={value}>
		  <CarComponent />
		</CarContext.Provider>
	  );
	}
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

I hope I’ve helped! '-'