How to split a text in list items in an array in Javascript / React?

Thank you for taking the time to read my question! Most likely I formulated my question wrong, so sorry for confusing you already. It also might be a basic Javascript question for some of you, but I can not wrap my head around it. I will try my best explaining as to what I am doing.

My data looks like this:

{
    "data": {
      "textvulnerabilities": [
        {
          "countryname": "Timor-Leste",
          "impacts": "Increase in rainfall intensity may lead to increase in flood occurrence in new areas.\n\tIncrease in floods may lead to extensive damage to existing water infrastructures and roads.\n\tIncrease in flood and drought occurrence will lead to exacerbation of current food security problems.\n\tAs a consequence of increased precipitation and extreme events, increase in landslides, wild fires, and deforestation will occur.\n\tIncreased rain variability and drought occurrence will lead to extended incidence of pest and crop diseases, as well as vector-borne diseases and increase in coastal vulnerability.",
          "hazardid": 242
        },
        {
          "countryname": "Tonga",
          "impacts": "A current lack of effective or efficient water storage infrastructure endangers agricultural production and water quality and quantity for human consumption in Tonga. The likelihood of increased sedimentation and salt water intrusion under future sea level rise and extended drought conditions could cripple existing water infrastructure.\n\tHurricane-strength cyclones, or those with winds stronger than 63 knots or 117 km/hr, have increased systematically in the southwest Pacific and the region now experiences on average four hurricane-strength cyclones a year. Increased cyclone intensity under possibly future climate change remains a matter of debate among the climate science community, however likely trends of drier and warmer climate and an increase in sea surface temperatures these disasters are likely to increase.\n\tA general increase in tropical cyclone intensity (lower central pressures, stronger winds and higher peak and mean precipitation intensities) appears likely, as does an eastward extension in the area of formation. Early Warning Systems need to be expanded and improved and better climate modeling available to prepare for impending storms and their correlative effects.\n\tFuture climate is expected to become more El-Nino like, resulting in more droughts in the southern Pacific and more rain and consequent floods in the equatorial Pacific and Cyclones are expected to increase in intensity by about 520 percent. Risk management of natural hazards (RMNH) such as Planting mangroves to stabilize land against erosion and managing.\n\tExpected sea level rise may completely inundate the villages of Villages of Kanokupolu-Haakili-Ahau, Nukuleka-Talafoou-Navutoka-Manuka and all the areas East of Sopu and Siesia at Nukunukumotu Island and Atata Island. A long lasting and effective foreshore protection seawall similar to the present Nukualofa foreshore protection would minimize and flooding in these and other low-lying areas.",
          "hazardid": 245
        },
      ]
    }
  }

My database contains about 251 countries and I am looping over every single one of them like this :

const CountryHazardText = ({ hazardid }) => {
  const { data, loading, error } = useQuery(GET_HAZARD_TEXT, {
    variables: { hazardid: hazardid },
  });

  const initialCountry = data ? data.textvulnerabilities : [];
  const singleCountry = initialCountry;
  {
    return (
      <div>
        {singleCountry ? (
          singleCountry.map((country, index) => {
            return (
              <div key={index}>
                <p>{country.impacts}</p>
              </div>
            );
          })
        ) : (
          <h6>No impacts found</h6>
        )}
      </div>
    );
  }
};

Which works fine. But as you can see, the impacts are quite large and they become difficult for users to read. Luckily there is a "\n" inside the object, so I assume that based on this I would be able to create a for-loop, that whenever it encounters a "\n", it would create a ListItem out of the text, right?

I tried formulating this, but came as close as this, then the logic in my head broke:

 {country.impacts ? (country.impacts.map ((impact, index) => 
          {
            return (
              // For every encounter with a "\n " inside country.impacts create a new listitem: 
              <ul>
                <li> </li>
              </ul>
            )

          })}

This is obv incorrect, but I don’t understand how I would do this. It would also be nice if someone would explain the exact terms as to what I am doing. As far as I understand, I am trying to map the content of an item in an array, right?

Thanks a lot for being here!

Bridler

2 thoughts on “How to split a text in list items in an array in Javascript / React?”

  1. You will want to split and map the impacts string inside the ul tags. Split by "\n\t" then map the resultant array to list items.

    {country.impacts && (
      <ul>
        {country.impacts.split("\n\t").map((impact, index) => (
          <li key={index}>{impact}</li>
        ))}
      </ul>
    }
    
    const impacts = "Increase in rainfall intensity may lead to increase in flood occurrence in new areas.\n\tIncrease in floods may lead to extensive damage to existing water infrastructures and roads.\n\tIncrease in flood and drought occurrence will lead to exacerbation of current food security problems.\n\tAs a consequence of increased precipitation and extreme events, increase in landslides, wild fires, and deforestation will occur.\n\tIncreased rain variability and drought occurrence will lead to extended incidence of pest and crop diseases, as well as vector-borne diseases and increase in coastal vulnerability."
    
    const result = impacts.split("\n\t").map((impact, index) => (
      `<li key=${index}>${impact}</li>`
    ));
    
    console.log(result);
    Reply

Leave a Comment