loop over objects in array in a function then output values

Question

I'm attempting to loop over an array of objects from a config file in a react app, and print out on the page the values of "headline, problem, and fix". I am attempting to loop over each object in the array in loopMessages function. But nothing is working to get the values to show up on the page. Is there a way to get my values to appear?

CONFIG:
`const messages = [
{
  headline: "some headline",
  problem: "some text here for description.",
  fix: "some solution"
},
{
  headline: "some headline",
  problem: "some text here for description.",
  fix: "some solution"
},
{
  headline: "some headline",
  problem: "some text here for description.",
  fix: "some solution"
},
{
  headline: "some headline",
  problem: "some text here for description.",
  fix: "some solution"
},
{
   headline: "some headline",
  problem: "some text here for description.",
  fix: "some solution"
},
{
   headline: "some headline",
  problem: "some text here for description.",
  fix: "some solution"
}
]
export default messages;`

import styles from "./styles.css";
import messages from "../../config/messages.js";

const loopMessages = () => {
  Object.values(messages).forEach((value) => {
   return  <p>value.headline<p>
     <p>value.problem<p>
     <p>value.fix<p>
   });
  });
 
};
const Guidlines = () => {
  return (
    <>
      <div className="sub-heading-container">
        <h3 className="sub-heading">Messages</h3>
      </div>
      <div className="guide-container">
        <div className="square">
          {loopMessages()}
        </div>
      </div>
    </>
  );
};
export default Guidlines;

I tried using Object.values with a forEach for my loop but my page is still blank and not printing out each object.

const loopMessages = () => {
  Object.values(messages).forEach((value) => {
   return  <p>value.headline<p>
     <p>value.problem<p>
     <p>value.fix<p>
   });
  });

Answer 1

loopMessages() is not returning any values, try with map and return

const loopMessages = () => {
  return Object.values(messages).map((value) => {
    return (
      <>
        <p>{value.headline}</p>
        <p>{value.problem}</p>
        <p>{value.fix}</p>
      </>
    );
  });
};

Answer 2

You could probably just do:

messages?.forEach(message => {
 return  
  <>
   <p>{message.headline}<p>
     <p>{message.problem}<p>
     <p>{message.fix}<p>
  </>
})

Here messages is an array and forEach loops through each message element(object) and message.keyname should give you the value

You should wrap all the < p> tags under one tag before returning it

Answer 3

Your loopMessage() is not returning anything that's why it is not working. try to make your loopMessage() like this. with map method. code below

const loopMessage=()=>{
  const result = messages.map((item)=>{
    return(<div>
      <p>{item.headline}</p>
      <p>{item.problem}</p>
      <p>{item.fix}</p>
      </div>
    )
  })
  return result;