I am trying to create a function in my class to avoid writing the same code multiple times. Currently I have my 3 bookshelves and have to write the same code between the Bookshelf tags 3 times. I would like to be able to call a function instead to make the code look more lean. This is my current code for 1 Bookshelf which works fine:

class BookApp extends React.Component {
    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                **{this.state.allBooks.filter((book) => {
                return book.shelf === 'currentlyReading';
                }).map((b) => {
                return (
                    <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                    />
                )
                })}**
            </Bookshelf>
        </div>
        )
    }   
}

I am trying to create a function in my class to avoid writing the same code multiple times. Currently I have my 3 bookshelves and have to write the same code between the Bookshelf tags 3 times. I would like to be able to call a function instead to make the code look more lean. This is my current code for 1 Bookshelf which works fine:

class BookApp extends React.Component {
    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                **{this.state.allBooks.filter((book) => {
                return book.shelf === 'currentlyReading';
                }).map((b) => {
                return (
                    <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                    />
                )
                })}**
            </Bookshelf>
        </div>
        )
    }   
}

I tried adding a function that does the same thing and calling that function inside { }, but it doesn't return my ponents. Any help is much appreciated!

class BookApp extends React.Component {

    filterBooks(shelf) {
            this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

• javascript
• reactjs
• function

Share Improve this question Follow asked Aug 29, 2018 at 4:11 Devon NorrisDevon Norris 18022 silver badges1212 bronze badges 1

• 2 You have only return map array but you didn't return filterBooks itself. Please returnfilterBooks function and see it working or not!. – Sahid Hossen Commented Aug 29, 2018 at 4:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Please check the code that I have edit. Simply return the filterList collection from filterBooks function.

class BookApp extends React.Component {

    filterBooks(shelf) {
           let filterList = this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
        return filterList;
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

simply put a return before "this.state.allBooks" but as you write react and the idea behind Components in react it would be better if you move this logic inside Bookshelf Component.

class BookApp extends React.Component {

    filterBooks(shelf) {
            return this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}