Trying to render div from an object value

Question

I'm trying to load a div from an object called matchedLog, but nothing is rendering on the screen. I'm wondering if my code is out of order, I've tried to move around the map piece of the code below the return but then it errors out. I do get the matchedLog value passed down to this function when I console.log, so I think it's the code for this function. Thank you for your help, I really appreciate it.

renderMatchedLogs = (matchedLog) => {
        
        return Object.entries(matchedLog).map(([key, value], i) => {
            return (
                <div>
                        {value.dateKey}
                        <br />
                        {value.mealKey}
                        <br />
                        {value.foodSelectedKey}
                        <br />
                        {value.reactionKey}
                        <br />
                </div>
            );
        });
    };

When I console.log(matchedLog) this is what I get:

{dateKey: "2021-08-17", mealKey: "breakfast", foodSelectedKey: Array(1), reactionKey: "neutral"}

The array for the foodSelectedKey is:

foodSelectedKey: ["Test"]

Answer 1

The Object.entries(matchedLog).map(([key, value], i) code is unnecessary and is what's causing your problem.

You're creating an array out of the object that looks like this:

// Result of Object.entries(matchedLog)
[
    [
        "dateKey",
        "2021-08-17"
    ],
    [
        "mealKey",
        "breakfast"
    ],
    [
        "foodSelectedKey",
        [
            "test"
        ]
    ],
    [
        "reactionKey",
        "neutral"
    ]
]

So when mapping, you can no longer access the values like this: value.key, you would just use the value.

const obj = {dateKey: "2021-08-17", mealKey: "breakfast", foodSelectedKey: ['test'], reactionKey: "neutral"}

console.log(Object.entries(obj).map(([key, value]) => value))

But like I mentioned, this is unnecessary altogether.

You already have the object, so there's no need to turn it into an array and map it.

renderMatchedLogs = (matchedLog) => {
  return (
    <div>
      {matchedLog.dateKey}
      <br />
      {matchedLog.mealKey}
      <br />
      {matchedLog.foodSelectedKey}
      <br />
      {matchedLog.reactionKey}
      <br />
    </div>
  );
};

Regarding I've tried to move around the map piece of the code below the return but then it errors out:

If matchedLog is potentially undefined and you're getting an error about accessing a property of undefined, just wrap the whole return in a conditional:

renderMatchedLogs = (matchedLog) => {
  if (matchedLog) {
    return // Your JSX from above
  }
  return null;
}

Running example:

const obj = {dateKey: "2021-08-17", mealKey: "breakfast", foodSelectedKey: ['test'], reactionKey: "neutral"}

const Example = () => {
  const renderMatchedLogs = (matchedLog) => {
    return (
      <div>
        {matchedLog.dateKey}
        <br />
        {matchedLog.mealKey}
        <br />
        {matchedLog.foodSelectedKey}
        <br />
        {matchedLog.reactionKey}
        <br />
      </div>
    );
  };
  
  const JSX = renderMatchedLogs(obj)

   return <div>{JSX}</div>
}

ReactDOM.render(<Example />, document.getElementById('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="root"></div>

Answer 2

You need to destructure the props. Assuming that renderMatchedLogs is the component, it should be named RenderMatchedLogs. You call it like <RenderMatchedLogs matchedLogs={...} /> and then access the passed matchedLogs as a property of the props passed to the component. So the definition should be:

const RenderMatchedLogs = (props) => {
  return Object.entries(props.matchedLog).map(([key, value], i) => {
    return (
      <div>
        {value.dateKey}
        <br />
        {value.mealKey}
        <br />
        {value.foodSelectedKey}
        <br />
        {value.reactionKey}
        <br />
      </div>
    );
  });
}

or

const RenderMatchedLogs = ({ matchedLog }) => { // destructured props
  return Object.entries(matchedLog).map(([key, value], i) => {
    return (
      <div>
        {value.dateKey}
        <br />
        {value.mealKey}
        <br />
        {value.foodSelectedKey}
        <br />
        {value.reactionKey}
        <br />
      </div>
    );
  });
}