loop over objects in array in a function then output values-CodePudding

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>
   });
  });

CodePudding user response：

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>
      </>
    );
  });
};

CodePudding user response：

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

CodePudding user response：

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;