score:0

in return you have both ({}) round and curly, you can remove both and you should return directly

return definition && definition.map(item => (
       <Definition term={item.term} 
            partofspeech = {item.partofspeech}
            definition={item.definition} 
            example = {item.example}                 
        />
    ));

Short snippet, you can run it and review :

const { useState } = React;

const App = () => {

  const [users,setUsers] = useState(['Vivek' , 'Darshita', 'Darshvi' , 'Coming..']);

  return users.map(user => <p>{user}</p>);
}

ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

score:3

Try this, when you loop the component loop the definition without the root element, it will cause error

const Component = () => {
  ....
  return (
    <Fragment>
      { definition && definition.map(item => (
       <Definition term={item.term} 
                  partofspeech = {item.partofspeech}
                  definition={item.definition} 
                  example = {item.example}                 
             />

            )
         )
        }

  )
    </Fragment>
  )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


Related Query

More Query from same tag