Nested function component ReactJS

Question

Hi I am student developer at ReactJS platform. I used class component before with render method but now I am learning hooks and function components are so important for it like every Reactjs developer know. I have a problem while using nested components and I am facing an error like this :

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it

Could you help me at this issue ? How can I use stateless function components in my return part efficiently ?

My sample nested components code :

import React, {useContext} from 'react';
import { BookContext } from '../../contexts/BookContext';
import BookDetails from './BookForm';


const BookList = (props) => {
    const {books} = useContext(BookContext);

    const emptyBooks = ()=>{
        return (
            <div className="empty">
                No books to read. Let's read now. You are free!
            </div>
        )
    }


    const notEmptyBooks=()=>{
        return (
            <div className="book-list">
                <ul>

                    {books.map(book=>{
                        return (

                            <BookDetails books={books} key={book.id}></BookDetails>
                        )
                    })}

                </ul>
            </div>
        )
    }

    // it does not work. I think error is here
    return books.length>0?()=>emptyBooks:()=>notEmptyBooks

}

export default BookList;

norbitrial · Accepted Answer · 2020-03-23 13:23:06Z

2

You need to call those functions. In your original code you technically just returned the function definition with () => emptyBooks. So your assumption was right the error happened there.

Try the following code snippet instead:

return books.length > 0 ? emptyBooks() : notEmptyBooks()

I hope this helps!

answered Mar 23, 2020 at 13:23

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

1 Comment

Emre Sert Over a year ago

Thank you so much. I understand now.

Hassaan Tauqir · Accepted Answer · 2020-03-23 13:26:51Z

1

You are returning a function instead of jsx, hence the error. A react component should always return jsx.

return books.length > 0 ? emptyBooks() : notEmptyBooks();

This should solve your problem.

answered Mar 23, 2020 at 13:26

Hassaan Tauqir

2,7521 gold badge16 silver badges11 bronze badges

Collectives™ on Stack Overflow

Nested function component ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related