import React from 'react' export const MessageSentiment = (props) => { var sentiment = JSON.parse(props.sentiment) console.log(sentiment) for(var key in sentiment ) { console.log(key, sentiment[key]) return (<h1>{key}: {sentiment[key]*100}</h1>) } }Output: <h1>Joy: 71.9115</h1> Expected output: <h1>Joy: 71.9115</h1> <h1>Extraversion: 59.527</h1> <h1>Agreeableness: 65.0456</h1>../src/components/messages/MessageSentiment.js 6:5 warning The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype guard-for-in ✖ 1 problem (0 errors, 1 warning) printWarnings @ webpackHotDevClient.js:196 handleWarnings @ webpackHotDevClient.js:209 connection.onmessage @ webpackHotDevClient.js:255 EventTarget.dispatchEvent @ eventtarget.js:49 (anonymous) @ main.js:274 SockJS._transportMessage @ main.js:272 EventEmitter.emit @ emitter.js:44 WebSocketTransport.ws.onmessage @ websocket.js:35export const MessageSentiment = (props) => { const sentiments = JSON.parse(props.sentiment); const keys = Object.keys(sentiments); return (export const MessageSentiment = (props) => { var sentiment = JSON.parse(props.sentiment) return ( <div> { Object.keys(sentiment).map((key, index) => <h1 key={index}> {key}:{sentiment[key]*100}</h1>) } </div> ) } <div> { keys.map(key => (<h1 key={key}>{key}: {sentiments[key]*100}</h1>)) } </div> ); }export const MessageSentiment = (props) => { var sentiment = JSON.parse(props.sentiment) return ( <div> { Object.keys(sentiment).map(key => ( <h1 key={key}>{key}: {sentiment[key]*100}</h1> )) } </div> ) }export const MessageSentiment = (props) => { var sentiment = JSON.parse(props.sentiment) let itemList = []; for(var key in sentiment ) { itemList.push(<h1>{key}: {sentiment[key]*100}</h1>) } return ( <div>{itemList}</div> ) }