Display Json objects in paragraph in REACT

Question

I am currently trying to put a transcript for an audio. The problem is that I am not able to put the JSON string in a paragraph format instead it is coming in different lines. My code is below

const transcript = (props) => {
  return (
      trans.word_timings[0].map(element => {
      return(
      <div className = "DisplayTextColored">
      <pre className = "TextSize">{element.word} </pre>
      </div>
      )
      })
  )
}

And my JSON file is

"word_timings": [

      {
        "startTime": "2.400s",
        "endTime": "2.800s",
        "word": "This"
      },
      {
        "startTime": "2.800s",
        "endTime": "3s",
        "word": "is"
      },
      {
        "startTime": "3s",
        "endTime": "3.400s",
        "word": "Brian"
      },
      {
        "startTime": "3.400s",
        "endTime": "3.900s",
        "word": "Isaacson"
      },
      {
        "startTime": "3.900s",
        "endTime": "4.100s",
        "word": "with"
      },
      {
        "startTime": "4.100s",
        "endTime": "4.500s",
        "word": "Guardian"
      },
      {
        "startTime": "4.500s",
        "endTime": "4.500s",
        "word": "mortgage"
      },
      {
        "startTime": "4.500s",
        "endTime": "5.400s",
        "word": "company"
      },
      {
        "startTime": "5.400s",
        "endTime": "5.700s",
        "word": "at"
      },
      {
        "startTime": "5.700s",
        "endTime": "5.900s",
        "word": "the"
      },
      {
        "startTime": "5.900s",
        "endTime": "6.100s",
        "word": "sound"
      },
      {
        "startTime": "6.100s",
        "endTime": "6.200s",
        "word": "of"
      },
      {
        "startTime": "6.200s",
        "endTime": "6.300s",
        "word": "the"
      },
      {
        "startTime": "6.300s",
        "endTime": "6.500s",
        "word": "tone,"
      },
      {
        "startTime": "6.500s",
        "endTime": "6.900s",
        "word": "please"
      },
      {
        "startTime": "6.900s",
        "endTime": "7.200s",
        "word": "leave"
      },
      {
        "startTime": "7.200s",
        "endTime": "7.300s",
        "word": "your"
      },
      {
        "startTime": "7.300s",
        "endTime": "7.600s",
        "word": "name"
      },
      {
        "startTime": "7.600s",
        "endTime": "8.200s",
        "word": "phone"
      },
      {
        "startTime": "8.200s",
        "endTime": "8.300s",
        "word": "number"
      },
      {
        "startTime": "8.300s",
        "endTime": "8.600s",
        "word": "and"
      },
      {
        "startTime": "8.600s",
        "endTime": "8.700s",
        "word": "a"
      },
      {
        "startTime": "8.700s",
        "endTime": "8.800s",
        "word": "brief"
      },
      {
        "startTime": "8.800s",
        "endTime": "9s",
        "word": "message,"
      },
      {
        "startTime": "9s",
        "endTime": "9.600s",
        "word": "and"
      },
      {
        "startTime": "9.600s",
        "endTime": "10s",
        "word": "I"
      },
      {
        "startTime": "10s",
        "endTime": "10s",
        "word": "will"
      },
      {
        "startTime": "10s",
        "endTime": "10.400s",
        "word": "return"
      },
      {
        "startTime": "10.400s",
        "endTime": "10.600s",
        "word": "your"
      },
      {
        "startTime": "10.600s",
        "endTime": "10.900s",
        "word": "call."
      },
      {
        "startTime": "10.900s",
        "endTime": "11.400s",
        "word": "Thank"
      },
      {
        "startTime": "11.400s",
        "endTime": "11.500s",
        "word": "you."
      }
]

I want to display each word in a paragraph but the words are being displayed in different lines. Also i don't want to use redux or so, only react-native for this purpose. Could anyone help me out with this, Thanks in advance .

Do you mean you want ALL the words in a single paragraph? If so you'll need to change your <div/> to an inline element, or apply inline display CSS to it. — Jayce444
– Jayce444, Commented May 12, 2020 at 8:28
I want to display each word in a paragraph but the words are being displayed in different lines. Do you mean all the words in a single paragraph or each word in its own paragraph? — trixn
– trixn, Commented May 12, 2020 at 8:33
Use this -> return trans.word_timings.map(element => (<span className="TextSize">{element.word} </span>)); — Champion
– Champion, Commented May 12, 2020 at 8:43
I want all the words to be displayed in single paragraph only — user6819864
– user6819864, Commented May 12, 2020 at 8:57

trixn · Accepted Answer · 2020-05-12 08:42:16Z

3

You are trying to map over the first item in your list instead of the list itself. Remove the [0] and it should work as expected:

return trans.word_timings.map(element => (
  <div className="DisplayTextColored">
    <pre className="TextSize">{element.word}</pre>
  </div>
));

Live Example:

I want to display each word in a paragraph but the words are being displayed in different lines.

If you meant to put all the words into a sigle paragraph it may be better to first join them into a complete sentence and render that into a paragraph:

const transcript = (props) => {
  const sentence = trans.word_timings.map(timing => timing.word).join(' ');

  return <p>{sentence}</p>
}

Live Example:

edited May 12, 2020 at 8:42

answered May 12, 2020 at 8:23

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6819864 Over a year ago

Thanks for the answer. This is what I wanted Thanks

Collectives™ on Stack Overflow

Display Json objects in paragraph in REACT

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related