Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Rendering <Context> directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

I am using react leaflet in my react app.
I used context api to build my project.
But when i tried using the leaflet using code :

  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>

I get errors like :

1.A context consumer was rendered with multiple children, or a child that isn’t a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it

2.Rendering directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

3.render2 is not a function

what to do ?

Below is my app structure :

<CitiesProvider>
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Homepage />} />
      <Route path="product" element={<Product />} />
      <Route path="pricing" element={<Pricing />} />
      <Route path="login" element={<Login />} />
      <Route path="*" element={<NotFound />} />
      <Route path="app" element={<AppLayout />}>
        <Route index element={<Navigate replace to="cities" />} />
        <Route path="cities" element={<CityList />} />
        <Route path="countries" element={<CountryList />} />
        <Route path="cities/:id" element={<City />} />
        <Route path="form" element={<Form />} />
      </Route>
    </Routes>
  </BrowserRouter>
</CitiesProvider>
Tags:

2

Answers


  1. 0

    Make sure CitiesProvider only wraps a single child node. Currently, it may be trying to render multiple components, causing errors. Use React.Fragment or a single component to wrap, you can try:

    <CitiesProvider>
  <>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="product" element={<Product />} />
        <Route path="pricing" element={<Pricing />} />
        <Route path="login" element={<Login />} />
        <Route path="*" element={<NotFound />} />
        <Route path="app" element={<AppLayout />}>
          <Route index element={<Navigate replace to="cities" />} />
          <Route path="cities" element={<CityList />} />
          <Route path="countries" element={<CountryList />} />
          <Route path="cities/:id" element={<City />} />
          <Route path="form" element={<Form />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </>
</CitiesProvider>
    Login or Signup to reply.
  2. 0

    I was running into the same thing and the version I installed was v5.0.0

    I downgraded to v4.2.1 and it is rendering now. I have an older version of react so I’m wondering if this had something to do with it, but I’m thinking this could help you as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search