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

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

This is a concise tutorial on how to convert a string to an array in a React example. It covers the use of the split() function to convert a string with a specified delimiter into an array.

Let’s begin with an input string.

var mystr = "This is a string";

And the desired output as an array.

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

In JavaScript, the split() function is utilized to split a string into an array of words.

Its syntax is as follows:

here is a syntax

string.split(delimiter);

By default, the delimiter is a space, but it can include commas(,), hyphens(-), or any other character.

In real-time scenarios, we often receive an object from an API containing a string property that needs to be converted into an array to render a component in React.

In real-time scenarios, we often receive an object from an API containing a string property that needs to be converted into an array to render a component in React.

Let’s explore examples with different delimiters such as spaces or commas in React.

How to Convert a String to an Array with Space Delimiter in React JavaScript

This example demonstrates converting 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 a space delimiter using the split method.
  • Finally, render the array using map iteration as an ordered list in 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 a String with Comma Delimiter into an Array in React

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

  • Store the full names as a string with delimiters in the React component state.
  • Convert the string into an array using a comma delimiter.
  • Finally, render the array of strings 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 utilizes the JavaScript split() function, which converts a string into an array of strings. You can specify space or comma delimiters. The split method returns an array of strings.

Here is an example for convert a string into a array in react.

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

Output:

hello
welcome

What does split do in react?

split is a method in JavaScript’s String class that takes a regular expression pattern, splits the string into an array of substrings, and returns the array. If no pattern is specified, the default delimiter is a space.

Conclusion

In this example, we’ve demonstrated how to convert a string into an array with a specified delimiter using the split function in React. This functionality is useful for various scenarios where string manipulation is required in React applications.