You must return something
const def = (props) => ( <div></div> );
or use return statement
const def = (props) => { return <div></div> };
Code Example
const MyPosts = () => { let datas = [ { id: 1, text: 'Post 1', likesCount: '1' }, { id: 2, text: 'Post 2', likesCount: '231' }, { id: 3, text: 'Post 3', likesCount: '547' } ]; const postsItems = [] for (const [key, value] of datas.entries()) { postsItems.push(<Post text={value.text} likesCount={value.likesCount} />) } return ( <div className={css.posts}> Posts: {postsItems} </div> ) }
- The return statements should place in one line. Or the other option is to remove the curly brackets that bound the HTML statement.
-
You can’t have and if inside
jsx
. You need to use thecondition ? if true : if false
syntax