comment afficher les messages de groupe

Une approche serait de regrouper les éléments de arrayOfMessages par le champ title , pour obtenir le résultat de rendu requis en utilisant le .reduce () code> méthode:

<div>
    { groupedMessages.map((group, idx0) => (<div key={idx0} className="message-content">
        <h2>{ group.title }</h2>
        { group.messages.map((message, idx1) => (<p key={idx1}>{message}</p>)) }        
        </div>))
    }
</div>

Votre objet n'est pas bien structuré, devrait être comme ceci:

{
  arrayOfMessages.map((message, idx) => {
    const { description, title } = message
    return (
      <div key={idx} className="message-content">
        <p>{title}</p>
        {description.map((desc, index) => (
          <p key={index}>desc</p>
        ))}
      </div>
    )
  })
}

alors vous pouvez implémenter votre code comme ceci:

arrayOfMessages=[
  {
    title:"cars",
    description:["toyota","ford","bmw"]
  },
  {
    title:"bike",
    description:["suzuki","bmw"]
  }
]

p >

Vous devez d'abord créer vos données.

...
let renderMessages = {}
arrayOfMessages.forEach(message => {
  if (!renderMessages[message.title]) {
    renderMessages[message.title] = {
      title: message.title,
      messages: [message.message]
    }
  } else {
    renderMessages[message.title].messages.push(message.message)
  }
})

return (
  <div>
    {Object.keys(renderMessages).map(key => {
      let msg = renderMessages[key]
      return <div key={key} className="message-content">
        <p>{msg.title}</p>
        {msg.messages.map(content => <p key={content}>{content}</p>)} 
      </div>
    })}
  </div>
)

Vous pouvez regrouper les messages en fonction du titre en utilisant réduire . Ensuite, parcourez les entrées de l'objet fusionné pour obtenir le format souhaité

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Voici une démonstration en direct:

class Sample extends React.Component {
  render() {
    const arrayOfMessages = [{ title: 'cars', message: 'toyota' }, { title: 'cars', message: 'ford' }, { title: 'cars', message: 'bmw' }, { title: 'bikes', message: 'suzuki' }, { title: 'bikes', message: 'bmw' },]

    const grouped = arrayOfMessages.reduce((acc, { title, message }) => {
      acc[title] = acc[title] || [];
      acc[title].push(message);
      return acc;
    }, {})

    return (
      <div>
        {
          Object.entries(grouped).map(([title, messages], i1) => (
            <div key={i1}>
              <h1>{title}</h1>
              { messages.map((message, i2) => (<p key={i2}>{message}</p>)) }
            </div>)
          )
        }
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Sample />,
  document.getElementById("react")
);

const arrayOfMessages=[{title:'cars',message:'toyota'},{title:'cars',message:'ford'},{title:'cars',message:'bmw'},{title:'bikes',message:'suzuki'},{title:'bikes',message:'bmw'},]

const grouped = arrayOfMessages.reduce((acc, { title, message }) => {
  acc[title] = acc[title] || [];
  acc[title].push(message);
  return acc;
}, {})

console.log(grouped)

essayez ceci

 render(){
   //title watcher
   let watcher = {};
   return   <div>
          {arrayOfMessages.map((item, idx) => {
            const {
              message,
              title
            } = item
             if(!watcher[title]){ 
                //update watcher with title
                //if watcher does not contain your title return title and message
                watcher[title]=title;
               return (
              <div key={idx} className="message-content">
                <p>{title}</p>
                <p>{message}</p>
              </div>
               )
             } else {
               //if watcher found with title return your message
                <div key={idx} className="message-content">
                <p>{message}</p>
              </div>
             }



          })}
        </div>

 }