learn-co-curriculum / redux-index-codealong Goto Github PK

In the code along we are instructed to render the Todo component like this:
renderTodos = () => this.props.todos.map((todo, id) => <Todo key={id} text={todo} />)

I've tried rendering a simple component this way a few times and it has been unsuccessful for me. The way that I've gotten it to render is by actually invoking Todo(props).
renderTodos = () => this.props.todos.map((todo) => Todo(todo))

My repo is at: https://github.com/msteele96/redux-index-codealong-online-web-sp-000

I'd love to hear if this is a legitimate problem with rendering or if there is some other error in my code that forced me to find this workaround.

Need to add the letter c to change "an" to "can" in the sentence below:
"Now that we have a way to get data from Redux, we an create a presentational component to handle displaying our todos."

Thank you.

Hi!

Quick note, since it's come up a lot during the React lectures, this codealong uses Todos' index as a key in:

renderTodos = () => this.props.todos.map((todo, id) => <Todo key={id} text={todo} />)

Recommend finding a way to add an id property to todo or just using the text as a key here, as in every lecture and code review the lead instructors and coaches are being very explicit about not using the index as a key value because of the problems it can cause with React caching arrays of components

We can confirm this is working by adding a log in the render of TodosContainer and then adding TodosContainer to our App component so it will be rendered.

That's already in the app, so I submit:

We can confirm this is working by adding a log in the render of TodosContainer, or by adding some text content to the currently-empty div. Since we've already added TodosContainer to our App component, it will be rendered right away.

@aturkewi The current version of this lab on learn-co-students v-000 does not have the updated folder structure and other fixes from pull request #1