How to Convert string with delimiter into an array in react typescript?

It is a short tutorial on how to convert string to array in react example. It includes how to convert a string with a delimiter to an array using the split() function.

Suppose we have a string as an input.

var mystr = "This is a string";

And output converted to Array

["this","is","an","string"]

In javascript, We have a string split() function. It is used to split the string into an array of words.

here is a syntax

string.split(delimiter);

by default, the delimiter is space and can include a comma(,), hyphen(-), and any character.

In real-time, We have an object coming from API.

this object contains the property of a string which we need to convert to an array to render a component in react.

Let’s see examples with different delimiter spaces or commas in react.

How to convert string to an array with space delimiter in react javascript

This example converts strings stored in react state into an array.

• store the string in react state.
• In the Render method, Convert the string into an array with delimiter space using the split method.
• Finally, render an array using map iteration as an ordered list on a component

Example:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: "This is a string",
    };
  }

  render() {
    let str = this.state.name;
    var myarray = str.split(" ");
    console.log(myarray);
    let result = myarray.map((item) => <li>{item}</li>);

    return (
      <div>
        <ul>{result}</ul>
      </div>
    );
  }
}

How to convert string with comma delimiter into Array in react

This is an example of converting full names into an array of first, last, and middle names.

• Let’s store the full names in string delimiter in react component state
• Convert string into an array using a string delimiter
• Finally, prints the array of strings to render using the map function

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: "firstName, lastName, middleName",
    };
  }

  render() {
    let fullname = this.state.name;
    var names = fullname.split(",");
    let result = names.map((item) => <li>{item}</li>);

    return (
      <div>
        <ul>{result}</ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

How do I convert a string to an array in React?

React uses a javascript string split function, that converts the string into an array of strings. You can apply space or comma delimited. The split method returns an array of strings.

Here is an example for cut a string in react.

var str = "hello welcome";
console.log(str.split(" "));

Output: hello welcome

What does split do in react?

split is a method in a String that takes a regular expression pattern, splits the string into an array of substrings, and returns the array.

String.split() takes an optional pattern, if no pattern, the default is space delimited.

Conclusion

In this example, Converted string into an array with space or delimiter using the array split function in reacting with the example.