CODEWITHSUNDEEP
javascripthtmlreactjsreduxreact-redux
kinny94
kinny94

Reputation: 374

props working in console, but not rendering on front end - React

I am working on a react application and I am getting this weird error in which I am trying to show the props value on the front end, but it's showing nothing, however, if I try to console.log the value of these props, I am getting correct values. Here's my code.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class BookList extends Component{

    renderBooks = () => {
        if( this.props.books.length === 0 ){
            console.log("No books");
            return <p>Getting books...</p>
        }else{
            console.log( this.props.books[0].id );
            return <h2> { this.props.books[0].id }</h2>//this.props.books.map(( book ) => {
            //     return (
            //         <div key={ book.id }>
            //             <h2>{ book.title }</h2>
            //             <h2>{ book.description }</h2>
            //             <h3>{ book.price }</h3>
            //         </div>
            //     )
            //});
        }
    }
    render(){
        return(
            <div>
                { this.renderBooks() }
            </div>
        )
    }
}

function mapStateToProps( state ){
    return {
        books: state.books.books
    }
}

export default connect( mapStateToProps )(BookList);

The map function isn't working either. In the console, I am getting correct props value, and when I try to inspect the HTML element of this <div>, I got this.

<div>
    <h2></h2>
</div>

Nothing in the tag. Why am is this happening and how can I fix it?

Upvotes: 0

Views: 2044

Answers (3)

Piyush Bhati
Piyush Bhati

Reputation: 956

The problem is with your reducer

replace your bookReducer with below code to work

export function booksReducers( state = { books:[] }, action ){
switch( action.type ){

    case "POST_BOOK":
        return Object.assign({}, state, {
            books: action.payload
        })
        break;

    case "DELETE_BOOK":
        return Object.assign({}, state, {
            books: state.books.filter(book => {
                if (book.id !== action.payload.id) {
                    return true
                }
            })
        })
        break;

    case "UPDATE_BOOK": 
    return Object.assign({}, state, {
        books: state.books.map(book => {
            if (book.id !== action.payload.id) {
                return book
            } else {
                return action.payload
            }
        })
    })
        break;
}

return state;
}

Upvotes: 1

Fernando Avalos
Fernando Avalos

Reputation: 91

Not sure what your parent component looks like, but here's a quick example of your component https://codesandbox.io/s/w263l83y1k

Upvotes: 1

Sasha Kos
Sasha Kos

Reputation: 2608

What about to debug in this way?

let dummyBooks = [
  { id: 1, title: 't1', description: 'd1', price: 1 },
  { id: 2, title: 't2', description: 'd2', price: 2 },
];

return dummyBooks.map(( book ) => {
   return (
       <div key={ book.id }>
          <h2>{ book.title }</h2>
          <h2>{ book.description }</h2>
          <h3>{ book.price }</h3>
       </div>
   )
});

if it is ok - then error is definitely about 

this.props.books

Maybe it is an object, not an array?

Upvotes: 3

Related Questions