Space between filtered string from array React

Question

i am trying to add space to the filtered names the filter return but i got all the names without space. how can i fix the filtered array i getting to be with space from name to name? how it look like currently -

i want the filtered array will return the names from the array with space or downline from name to name.

here is my code :

import logo from './logo.svg';
import './App.css';
import React from "react";

class App extends React.Component {

  state = {
array : ["saar","shoval","moshe","ori","liam"],
      text:""
  };

  textInput = (event) =>{
      const inputText=event.target.value;
      this.setState({
          text:inputText
      })
}
addName = () => {
      const name =this.state.array;
      name.push(this.state.text);
      this.setState({
          array:name,
          text: ""
      })
}

render(){

  return(
      <div>
        <div><h2><u>long names</u></h2>
            {this.state.array.filter((item) => {
                return(
                    item.length >= 4
                ) } )}
      </div>
            <div><h2><u>short names</u></h2>
                {this.state.array.filter((item) => {
                    return(
                        item.length < 4
                    ) } )}
            </div>
          <input value={this.state.text} onChange={this.textInput} />

          {this.state.text.length > 0 ?
              <button onClick={this.addName}>Add</button>
              :
             <div> </div>
          }

      </div>
  )
}

}

export default App;

Samathingamajig · Accepted Answer · 2021-08-06 19:04:25Z

You're never added spaces. The easiest way to do this is to join the filtered array with a space to make it a single string.

Your code would look like this:

import logo from './logo.svg';
import './App.css';
import React from "react";

class App extends React.Component {

  state = {
array : ["saar","shoval","moshe","ori","liam"],
      text:""
  };

  textInput = (event) =>{
      const inputText=event.target.value;
      this.setState({
          text:inputText
      })
}
addName = () => {
      const name =this.state.array;
      name.push(this.state.text);
      this.setState({
          array:name,
          text: ""
      })
}

render(){

  return(
      <div>
        <div><h2><u>long names</u></h2>
            {this.state.array.filter((item) => {
                return(
                    item.length >= 4
                ) } ).join(" ")}
      </div>
            <div><h2><u>short names</u></h2>
                {this.state.array.filter((item) => {
                    return(
                        item.length < 4
                    ) } ).join(" ")}
            </div>
          <input value={this.state.text} onChange={this.textInput} />

          {this.state.text.length > 0 ?
              <button onClick={this.addName}>Add</button>
              :
             <div> </div>
          }

      </div>
  )
}

}

export default App;

Emersson Cardim Mota · Accepted Answer · 2021-08-06 19:31:57Z

0

I don't know if it's the best alternative, but I found this solution for you

{this.state.array.map((item) => {
   return item.length >= 4 && `${item} `;
})}

answered Aug 6, 2021 at 19:31

Emersson Cardim Mota

8456 silver badges6 bronze badges

Collectives™ on Stack Overflow

Space between filtered string from array React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related