Rockyy Rockyy - 1 month ago 13
Javascript Question

React Redux Failed prop type: Required prop was not specified

I'm having some problems with a failed prop type trying to learn Redux with react.
The thing is I want to create a note with a title and some text, but because of the Failed prop type only the title will display.

The warnings:

warning.js:36 Warning: Failed prop type: Required prop `notes[0].text` was not specified in `NoteList`.
in NoteList (created by Connect(NoteList))
in Connect(NoteList) (created by App)
in div (created by App)
in App
in Provider

warning.js:36 Warning: Failed prop type: Required prop `text` was not specified in `Note`.
in Note (created by NoteList)
in NoteList (created by Connect(NoteList))
in Connect(NoteList) (created by App)
in div (created by App)
in App
in Provider




ListNotes.js:

import { connect } from 'react-redux'
import NotesList from '../components/NotesList'

const mapStateToProps = (state) => {
return {
notes: state.notes
}
}

const ListNotes = connect(
mapStateToProps
)(NotesList)

export default ListNotes




NotesList.js:

import React, { PropTypes } from 'react'
import Note from './Note'

const NoteList = ({ notes }) => {
return (
<ul>
{notes.map(note =>
<note
key={note.id}
{...note}
/>
)}
</ul>
)
}


NoteList.propTypes = {
notes: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}).isRequired).isRequired
}

export default NoteList




Note.js:

import React, { PropTypes } from 'react'

const Note = ({title, text}) => {
return (
<li>
<h1>{title}</h1>
<p>{text}</p>
</li>
)
}

Note.propTypes = {
title: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}

export default Note

Answer

Check what’s in state.notes. You could log it or set a breakpoint somewhere and use your browser’s debugger.

It seems the objects in that array don’t have a text property or it’s set to undefined or null. You might have a typo where that value should be set.

If you’re seeing the titles then everything else seems to be in order.