TypeError: render is not a function with context api

Question

I was trying to make a weather app with React. However, I encountered an error that I could not solve.

These are my codes:

App.js:

import './App.css';
import SelectCity from './components/SelectCity';
import CityProvider from './context/CityContext';

function App() {
  return (
      <CityProvider>
        <SelectCity></SelectCity>
      </CityProvider>
  )
}

export default App;

SelectCity.js:

import {useContext} from 'react'
import useTurkeyCities from "use-turkey-cities"
import CityContext from '../context/CityContext'

function SelectCity() {

    const { cities, city } = useTurkeyCities()
    const { contextCity, setContextCity } = useContext(CityContext)

    return (
        <div>
            <select
                onChange={e => {
                    setContextCity(e.target.value);
                }}
                value={city}
            >
                {cities.map(city => (
                    <option key={`city-${city}`} value={city}>
                        {city}
                    </option>
                ))}
            </select>
        </div>
    )
}

export default SelectCity

CityContext.js:

import { createContext, useState } from "react";

const CityContext = createContext()

export const CityProvider = ({children}) => {

    const [contextCity, setContextCity] = useState(null)
    const cityValues = {
        contextCity,
        setContextCity
    }

    return <CityContext.Provider value={cityValues}>{children}</CityContext.Provider>
    
}

export default CityContext

but i have TypeError: render is not a function. What is resolve this problem, i don't understand

It's always great to generate codesandbox if there's nothing private in the code. :) Especially, for such long/multi file problems... — Kid
– Kid, Commented Nov 2, 2021 at 2:08

noname · Accepted Answer · 2021-11-02 15:19:50Z

1

I resolved this error.

import CityProvider from './context/CityContext';

I changed this code to:

import {CityProvider} from './context/CityContext';

answered Nov 2, 2021 at 15:19

noname

115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: render is not a function with context api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related