Object entries map does not render

Question

I have some data I store on DynamoDB. I want to display the nutrient the information as a list (see AwsFunctions.js).

AwsFunctions.js

export function Nutrients(props) {

    // Load the AWS SDK for Node.js
    var AWS = require('aws-sdk');

    // Create DynamoDB service object
    var ddb = new AWS.DynamoDB({apiVersion: '2012-08-10'});

    const [data, setData] = useState([]);

    var params = {
        ExpressionAttributeValues: {':title' : {'S' : props.title}},
        KeyConditionExpression: 'title = :title',
        ProjectionExpression: 'nutrients',
        TableName: props.tableName,
    };

    useEffect(() => {
        ddb.query(params, function (err, data) {
        if (data) {
            setData(data['Items'][0]['nutrients']['M']);
        } else {
            console.log(err);
        }
        });
    }, [props.title]);

    console.log(data)

    return Object.entries(data).map(([key, value]) => {
        console.log(key, value['S']);
        <li key={key}>{key} {value['S']}</li>
    })

}

It displays the way I want to in the console log, it just does not render it on the page (see Recipe.js).

Recipe.js

import {Nutrients} from './AwsFunctions';

export const Recipe = () => {
    const path = window.location.pathname
    var title = path.replace(/%20/g, " ")
    var title = title.replace('/','')
    var nutrients = <Nutrients tableName='recipes' title={title}/>
    return (<div><ul>{nutrients}</ul></div>);
 }

What step did I miss?

Answer 1

You're not returning the li from the map

return Object.entries(data).map(([key, value]) => {
  console.log(key, value['S']);
  return <li key={key}>{key} {value['S']}</li>
})