Why are functions not valid as a React child?

Question

So I have this component to render a list from the store (you can see it from the data object array gained as props). In fact, it works. Exactly as it should be.

The issue here is that each time the component or the whole app re-renders, I am getting these big annoying errors in the terminal.

Here is the component:

    export default class CityList extends React.Component{

    render(){
        const citiesArr = this.props.data.map((city)=> {
            if(city !== undefined){
                return city.name;
            } else {
                return console.log('city is undefined');
            }
        });
        const getCity = this.props.getCity;
        const deleteCity = this.props.deleteCity;

        return(
        <Ulist>

            {citiesArr.map((city, index)=>{
                return (
                    <ListItemWrapper key={index}>
                        <ListItem  onClick={()=> getCity(city)}>
                            {city.toString()}
                        </ListItem>
                        <Button2 onClick={()=> deleteCity(city)}>X</Button2>
                    </ListItemWrapper>
                );
            })}
        </Ulist>
        );
    }
}

Just to clarify generated by styled-components tags:

Ulist = ul
ListItemWrapper = div
ListItem = li
Button2 = button

And here is what I receiving each time:

    index.js:2177 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (created by styled.div)
    in styled.div (at CityWeather.js:31)
    in CityWeather (at WeatherApp.js:41)
    in ul (created by styled.ul)
    in styled.ul (at WeatherApp.js:40)
    in div (created by styled.div)
    in styled.div (at WeatherApp.js:38)
    in WeatherApp (created by Connect(WeatherApp))
    in Connect(WeatherApp) (at index.js:25)
    in Provider (at index.js:24)
index.js:2177 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in li (created by styled.li)
    in styled.li (at CityWeather.js:32)
    in div (created by styled.div)
    in styled.div (at CityWeather.js:31)
    in CityWeather (at WeatherApp.js:41)
    in ul (created by styled.ul)
    in styled.ul (at WeatherApp.js:40)
    in div (created by styled.div)
    in styled.div (at WeatherApp.js:38)
    in WeatherApp (created by Connect(WeatherApp))
    in Connect(WeatherApp) (at index.js:25)
    in Provider (at index.js:24)

That is pretty much it. I have a hunch that it has something to do with my

citiesArr.map((city, index)=>

and allready tried to declare this part as const:

const Items = (function(){
            return(
                citiesArr.map((city, index)=>{
                    return (
                        <ListItemWrapper key={index}>
                            <ListItem  onClick={()=> getCity(city)}>
                                {city.toString()}
                            </ListItem>
                            <Button2 onClick={()=> deleteCity(city)}>X</Button2>
                        </ListItemWrapper>
                    );
                })
            );
        });

But it changed nothing. Here is CityWeather component as well:

export default class CityWeather extends React.Component{

    render(){
        const city = this.props.current;
        const temperature = ()=> {
            console.log(city.main.temp);
            if(city.main.temp){
                return city.main.temp-273;
            } else return 'No temp yet';
        };
        const cityName = ()=> {
            console.log(city.name);
            if(city.name){
                return city.name;
            } else return 'Noname';
        };
        const wind = ()=> {
            console.log(city.wind);
            if(city.wind){
                return city.wind;
            } else return 'No wind data yet';
        };
        return(

            <Li>
                <Day>{cityName}this name{city.name}</Day>
                {temperature} <br/>
                {wind}
                this data
            </Li>

        );
    }
}

Answer 1

I'm not sure the code above is what's causing the error. With that code, the child of Ulist will always be an array.

I'm not sure what shape of data each city is, but I suspect the error is more likely to be caused by some unexpected data making into this line.

{city.toString()}

Try logging the value of city to make sure it is what you expect it to be.

Answer 2

Removed functions from data that I tried to transit as props. It helped! Now they look simply as this:

const city = this.props.current;
        const temperature = city.main? city.main : 'no temperature yet';
        const cityName =  city.name ? city.name : 'no name yet';
        const wind =  city.wind ? city.wind : 'no wind yet';
        return(

            <Li>
                <Day>{cityName}</Day>
                Temperature: {temperature.toString()} <br/>
                Wind speed: {wind.toString()} <br />
            </Li>

        );

Did not completely solved my problems, it still passing objects instead of data, but this is issue I can resolve for myself. Thanks all for useful critics! Stay sharp.