score:3
because the arrow function
todo => {
<li key={todo.id}>{todo.name}</li>
}
returns nothing and you will get an array that contains undefined
s ( based on the length of todos
). for example:
const ary = [1, 2, 3].map(el => { console.log(el) })
console.log(ary) // [undefined, undefined, undefined]
you must return something in the callback of .map()
if the callback only contains 1 expression and returns immediately, you can omit the { }
and return
.
const foo = () => {
return 'foo'
}
is equal to
const foo = () => 'foo'
so now you can:
const todolist = ( {todos} ) => (
<ul>
{ todos.map( todo => (
<li key={todo.id}>{todo.name}</li>
))}
</ul>
)
also the ( )
is not a must, you can omit that if you preferred:
const todolist = ( {todos} ) => (
<ul>
{ todos.map(todo => <li key={todo.id}>{todo.name}</li>) }
</ul>
)
score:0
the difference has to do with how you specify the body of the arrow function.
{ todos.map( todo =>
<li key={todo.id}>{todo.name}</li>
)}
is an expression within the body and by default does not need a return statement,
<ul>
{ todos.map(todo => <li key={todo.id}>{todo.name}</li>) }
</ul>
when defined within a block, a return statement needs to be included .
score:0
here, you nicely added a block statement , in block statement implicit return is syntactically ambiguous, now it returns undefined. in es6 arrow function return is implicit under some circumstances. like you added a block it made undefined. you can find more detail in this post.
score:0
if you look at the documentation for map, you have to return a value, which will be the new value in the new array created by the map function. this means that return
has to exist in the callback of your map function, whether stated explicitly or implicitly.
the arrow functions you have declared as a callback (e.g todo => <li key={todo.id}>{todo.name}</li>
) in the first and the second example are equal. you may want to refer to different ways to declare arrow functions in the documentation here.
in the third example however, you are returning a block of code without a return statement. the default behavior of the javascript runtime is to return undefined. here are some code to demonstrate this behavior:
const test = () => { var a; /* a block of code with no return statement */ }
const a = test();
console.log(a);
hence, the elements of the array that is returned from the map function in your third example will undefined. this is the main reason why your todos are not getting rendered in your list.
Source: stackoverflow.com
Related Query
- react component with arrow function weird behavior
- React passing parameter with arrow function in child component
- Is it possible to type a React function component with TypeScript without using arrow functions?
- Component not mounted when setState called in arrow function in React with ES2016
- react component method binding with arrow function (class properties)
- How to test arrow function calling in react component with jest?
- Best practice using an arrow function in a React class component with setState
- How to import a react component with arrow function to app.js
- Weird behavior using a generator function with React
- how to test react arrow function dealing with statefull component state
- Passing type to react component declared with arrow function
- this keyword behavior in classes and react component ( Arrow function vs regular function)
- Test a React Component function with Jest
- React w/hooks: prevent re-rendering component with a function as prop
- How to specify function parameters for React component callback with TypeScript?
- Passing a function with React Context API to child component nested deep in the tree
- How to use jest.spyOn with React function component using Typescript
- Mock React useRef or a function inside a functional component with enzyme and jest?
- Testing debounced function in React component with Jest and Enzyme
- _this.store.getState is not a function when testing react component with enzyme and mocha
- Jest - mock fat arrow function within React component
- Arrow function is considered unexpected token in React component using babel
- React Arrow Function Component - setState is not defined
- react functional component with ag grid cannot call parent function via context
- React this.setState With Arrow Function Causes Error In Console
- How to test with jest and typescript with types a basic react function component
- Prop in stateless component fat arrow function cannot be validated with eslint
- this.props shows as undefined in an arrow function within React Component
- Simple react component not accepting arrow function
- React component with function
More Query from same tag
- ReactJs: How to pass api data to components?
- autocomple searchbox suggestion div style css
- Access field of object in array (state) in React
- How to add a plus sign before a variable in React.js?
- Nesting a react router inside another component while preserving a sidebar
- NextJS: I am getting undefined from api json data
- BufferedConsole module not found
- Is dispatch function returned from useDispatch hook synchronous with async thunk?
- Targeting the color of modal backdrop over layer v4 mui?
- Set width property array dynamically
- Correct type for children props in wrapper class?
- antv/g6 and react. How to update graph?
- Sorting By Asc and Desc date
- How to properly deal with code that need to wait for previous constants to be loaded?
- Does order in which you wrap component with connect and withRouter matter
- Loop through object and get random item in javascript
- Adding Manual prop to react-table disables internal sort and filter
- How to embed the same redux-form multiple times on a page?
- React Updater function doesn't work. Regular setState somehow does? (Cannot read property 'name' of null)
- How to count up by 1 and setState every 5 seconds in react
- is it possible to custom the image size of dangerouslySetInnerHTML in react
- How to import a react file
- React axios Error: Request aborted for delete request in Firefox but not in Chrome
- Can't see my state updated if i console.log outside the axios .then function
- Third party API call through Firebase Cloud functions ( with Blaze plan). React/Redux
- ReactJS: Images are sometimes not appearing on button click
- useEffect dependency list and its best practice to include all used variables
- how do i send react data to express backend?
- Why does not cypress alias work on Github CI?
- Add new items to my shopping cart in React