Conditional object rendering

[SLS-BLN]

Für meine Blog post Komponente benötige ich Eure Hilfe. Und zwar geht es darum, zwischen zwei Textabschnitten eine h2 zu rendern.

Das Blog object sieht wie folgt aus:

{
    id: nanoid(),
    title: 'Warum ein guter Ton bei Videos so wichtig ist',
    titleShort: 'Warum Ton wichtig ist',
    slug: 'warum-ton-wichtig-ist',
    imgUrl: 'https://res.cloudinary.com/dq2vrujou/image/upload/v1658962032/cld-sample-2.jpg',
    tag: 'Audio',
    lead: 'Bei einem Dreh ist es neulich wieder passiert: schöne Bilder aus einem kleinen Modeladen, aber kein Ton.',
    author: 'von Stefan L. Schlicker',
    date: '15. Juli 2022',
    dateUpdated: 'last update: 17. Juli 2022',
    text: [
      'Als ich das im Schnittprogramm bemerkt habe, war die Laune sofort dahin. All die schöne Atmo weg - kein Dampfbügeleisen zu hören, keine Kundengespräche und kein Surren der Nähmaschine.',
      'Ist gar nicht so schlimm, mag sich der ein oder andere denken. Nun ja, zunächst einmal musste ich für eine Minute Material im fertigen Beitrag Geräusche unterlegen. Das ist mühsam und dauert eine halbe Stunde länger als geplant. Noch schlimmer ist, dass die Original-Atmo den Beitrag viel authentischer gemacht hätte. Das liegt daran, wie unser Gehirn Musik und Geräusche verarbeitet: unterbewusst.',
      'Stellen Sie sich vor: Sie spazieren auf der Straße. Fünf Kampfhunde stürmen bellend heran. Bevor Sie sich umdrehen und die Gefahr sehen, ist Ihr Gehirn schon in Alarmbereitschaft. Das Hören ist der Sinn, der unmittelbar eine Reaktion im Körper auslöst.',
      "Das ist kein Grund, sie bei der Produktion zu ignonieren - die Kampfhunde lauern überall. Der Ton verstärkt das Bild und kann Emotionen auslösen. Was wäre die Kussszene von 'Titanic' ohne die Klänge von 'My Heart will go on' - an der Stelle übrigens ohne die Stimme von Celine Dion. Die war nur Abspann zu hören.",
      'Wenn etwas mit dem Ton nicht stimmt, dann merkt der Zuschauer das sehr bewusst. Die Grundregel lautet: das Publikum verzeiht schlechte Bildqualität, wenn der Ton gut ist. Umgekehrt gilt das nicht: ist das Bild schön, aber der Ton verzerrt, dann dauert es nur wenige Sekunden, bis der Zuschauer reagiert. Das nächste Video ist einen Klick entfernt.',
      'In Corona-Zeiten sind in den Nachrichtensendungen verstärkt Interviews von zu Hause zu sehen. Die Bildqualität ist oft nicht berauschend. Wenn dazu ein blecherner Ton kommt, ist der Griff zur Fernbedienung nicht weit.',
      'Noch klarer wird der Fall im Autoradio. Sobald man sich von seinem Lieblingssender entfernt und die ersten Störungen auftreten, wird das Programm gewechselt. Lieblingslied hin oder her.',
      'Wenn Sie also ein Video drehen, dann muss der Ton mindestens so gut wie die Bilder sein.',
    ],

    subHeading: ['Audio wirkt anders als Video – viel unmittelbarer', 'Zuschauer ertragen schlechten Ton nicht'],
  }

Der Text ist im Array "text" hinterlegt - und zwar Abschnitt für Abschnitt. D.h. jedes array item ist ein Abschnitt. Die Zwischen-Überschriften sind in einem Array names "subHeading" zu finden.

Bisher habe ich folgende Lösung erarbeitet, die auch funktioniert:

import styled from 'styled-components/macro';
import {blogs} from './Blogdata';
import {Fragment} from 'react';

export default function Blog() {
  return (
    <Container>
      {blogs.map(blog => (
        <Fragment key={blog.id}>
          <img src={blog.imgUrl} alt="" width={300} />
          <p className="tag">{blog.tag} </p>
          <h1>{blog.title}</h1>
          <p className="lead">{blog.lead}</p>
          <p>{blog.author}</p>
          <p className="date">
            {blog.date} {blog.dateUpdated}
          </p>
          <p className="textbody">{blog.text[0]}</p>
          <p className="textbody">{blog.text[1]}</p>
          <p className="textbody">{blog.text[2]}</p>
          <h2>{blog.subHeading[0]} </h2>
          <p className="textbody">{blog.text[3]}</p>
          <p className="textbody">{blog.text[4]}</p>
          <h2>{blog.subHeading[1]} </h2>
          <p className="textbody">{blog.text[5]}</p>
          <p className="textbody">{blog.text[6]}</p>
          <p className="textbody">{blog.text[7]}</p>
        </Fragment>
      ))}
    </Container>
  );
}

Der Nachteil ist, dass die <p> Tags über den Index [0] bis [7] angesprochen werden.

<p className="textbody">{blog.text[7]}</p>

Lieber würde ich das so lösen:

  <div>
            {blog.text.map(textp => (
              <p key={blog.slug} className="textbody">
                {textp}
              </p>
            ))}
          </div>

Die Frage ist, wie ich dann die h2 platzieren kann? Das Ergebnis soll nachher wie folgt aussehen:

[julialoeschel]

Hey. soll die Subheading immer nach genau x Textabschnitten gerendert werden, oder ist das bei jedem Object anders? In dem Fall wäre es Sinnvoll, die Daten anders zu strukturieren.
Die Information welcher Text zu welcher Überschrift gehört, müsste ja irgendwo zu sehen sein.

[SLS-BLN]

Hi Julia, das wäre in der Tat unterschiedlich bei jedem Object.

Ich teste später noch eine Lösung, die @tomsmulski vorgeschlagen hat. Im Prinzip läuft das dann im Code über .contains() und einen ternary operator wie z.B. text contains ##-Zeichen ? mache daraus h2 : sonst gebe ein p element heraus.

Die Subheadings bekommen kein eigenes array mehr. Stattdessen werden sie im text array an der Stelle platziert, an der sie stehen sollen. Vor dem ersten Buchstaben müssen nur ##-Zeichen eingefügt werden (wie bei Markdown).

[mbosselmann]

Hallo Stefan,
konntest du dein Problem mittlerweile lösen? :)

[SLS-BLN]

Problem ist gelöst - aber ich kann mich selbst nicht grünen (glaube ich jedenfalls)

[mbosselmann]

Super! Ich habe jetzt einfach diesen gesamten Thread grün markiert, weil sich hija dein Lösungsansatz befindet. Wenn du doch etwas anderes gemacht hast, was dir bei der Lösung geholfen hat, kannst du diese als neue Antwort posten und diese dann grün markieren.