Objects are not valid as a React child (found: object with keys {item}). If you meant to render a collection of children, use an array instead

Question

я делаю Todo app на React и при рендере компонента с текстом задания вылетает ошибка:

Objects are not valid as a React child (found: object with keys {item}). If you meant to render a collection of children, use an array instead.

Я хочу с помощью тернарного оператора определить компонент в {item}, но не выходит. Спасибо большое за помощь!

Код компонента

import React, { Component } from 'react';
import styled from 'styled-components';
import {ReactComponent as Logo} from '../../assets/img/close.svg';
import TodoCheckbox from './todo-checkbox/TodoCheckbox';
import styles from './TodoItem.module.css';

const TodoContainer = styled.div`
    background: white;   
    display: flex;
    height: 4em;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    border-radius: 5px;
    border-top: 1px solid hsl(0, 0%, 90%);
`;
// const ToDoContainer = styled(TodoContainer);

const TodoText = styled.span`
    color: black;
    flex-basis: 85%;
    user-select: none;
`;

const View = ({content}) => {
    console.log(content);
    return (
        <TodoContainer> { /*Empty container */}
            <TodoCheckbox/>
            <TodoText>{content}</TodoText>
            <Logo className={styles.close}/>
        </TodoContainer>
    )
}

const EmptyView = () => {
    const content = 'Here your Todo will be displayed';

    return (
        <TodoContainer> { /*Empty container */}
            <TodoCheckbox/>
            <TodoText>{content}</TodoText>
            <Logo className={styles.close}/>
        </TodoContainer>
    )
}


export default class TodoListItem extends Component {

    checkForContent = (content) => {
        console.log(content);
        if (content) {
            return true
        } else {
            return false
        }
    }

    render() {
        const {content} = this.props;
        const item = this.checkForContent(content) ? <View content={content} /> : <View content={'hello'}/>
        console.log(item);

        return (
            {item}
        );
    }
}



export {TodoContainer};

<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>

БЛОГ НА HUSL

Objects are not valid as a React child (found: object with keys {item}). If you meant to render a collection of children, use an array instead

Ответы (0 шт):