React Js map function gives an "not a function" error

Question

I'm trying to map through objects to display their values in my React JS project. It looks like I can't access values of the objects within objects using the map function, values simply are not displayed, or if I try to use (.split("/p")) it gives me an error saying "split is not a function".

Link to codesandbox

this is my code:

import React from "react";
import { studies } from "./studies";

import "./styles.css";

const Data = ({ title, text, number, numberdesc }) => {
  return (
    <>
      <div style={{ margin: "1rem" }}>{title}</div>
      <div style={{ margin: "1rem" }}>{text}</div>
      <div>{number}</div>
      <div>{numberdesc}</div>
    </>
  );
};

function App() {
  const appComponent = studies.map((post, i) => {
    console.log(studies);
    return (
      <Data
        key={i}
        number={studies[i].post.number}
        title={studies[i].post.title}
        text={studies[i].post.text
          .split("/p")
          .reduce((total, line) => [total, <br />, <br />, line])}
      />
    );
  });
  return <>{appComponent}</>;
}

export default App;

and {studies} file:

export const studies = [
  {
    id: "first",
    text: "1st Post",
    post: {
      data: [
        { number: "100", numberdesc: "description1" },
        { number: "200", numberdesc: "description2" },
        { number: "300", numberdesc: "description3" }
      ],

      text: [
        {
          title: "Title1 from the 1st post",
          text: "Text1 from the 1st post."
        },
        {
          title: "Title2 from the 1st post",
          text: "Text2 from the 1st post."
        },
        {
          title: "Title3 from the 1st post",
          text: "Text3 from the 1st post"
        }
      ]
    }
  },
  {
    id: "second",
    text: "2nd Post",
    post: {
      data: [
        { number: "100", numberdesc: "description1" },
        { number: "200", numberdesc: "description2" },
        { number: "300", numberdesc: "description3" }
      ],

      text: [
        {
          title: "Title1 from the 2nd post",
          text: "Text1 from the 2nd post "
        },
        {
          title: "Title2 from the 2nd post",
          text: "Text2 /p from the 2nd post"
        },
        {
          title: "Title3 from the 2nd post",
          text: "Text3 from the 2nd post"
        }
      ]
    }
  }
];

What I want to do is to access data and text values for each post, and display them in my Project. Any help and suggestion is greatly appreciated,

Thank you.

Answer 1

Is this what you're looking for?

function App() {
  const appComponent = studies.map(study =>
    study.post.data.map((data, k) => (
      <Data
        key={k}
        number={data.number}
        numberdesc={data.numberdesc}
        title={study.post.text[k].title}
        text={study.post.text[k].text}
      />
    ))
  );
  return <>{appComponent}</>;
}

Note I arbitrarily zipped data[k]'s number and numberdesc with text[k]'s title and text, but that might not necessarily be what you intend to display.

The above will likely break in case your data and text arrays do not have the same length in any given study.

See it here.