react loop function

there is a way to efficiently show and manage repetitive content in React.

import React, { Component } from 'react';

class Test extends Component {
  state = {
    seasons: ["spring", "summer", "fall", "winter"]
  }
  render() {
    const { seasons } = this.state;
    const seasonList = seasons.map(
      (season, i) => (
        <li key={i}>{season}</li>
      )
    );
    return (
      <div>
        <ul>
          {seasonList}
        </ul>
      </div>
    );
  }
}

export default Test;

this is map() example

in the states seasons variable contains data as an array , render() from inside use map function

from here , The key here is that when using map you must provide a key value for the tag.

import React, { Component } from 'react';

class Test extends Component {
  state = {
    seasons: ["spring", "summer", "fall", "winter"],
    name: ""
  }
  mapTestChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  mapTestClick = (e) => {
    this.setState({
      seasons: this.state.seasons.concat(this.state.name),
      name: ""
    })
  }
  render() {
    const { seasons, name } = this.state;
    const { mapTestChange, mapTestClick } = this;
    const seasonList = seasons.map(
      (season, i) => (
        <li key={i}>{season}</li>
      )
    );
    return (
      <div>
        <input type="text"
          name="name"
          placeholder="input...."
          value={name}
          onChange={mapTestChange}
        />
        <button onClick={mapTestClick}>add</button>
        <ul>
          {seasonList}
        </ul>
      </div>
    );
  }
}

export default Test;

concat

 mapTestClick = (e) => {
    this.setState({
      seasons: this.state.seasons.concat(this.state.name),
      name: ""
    })
  }

if you paste the existing array in [].concat(data) format, the array is added at the end of the array.

spread slick delete

 import React, { Component } from 'react';

class Test extends Component {
  state = {
    seasons: ["spring", "summer", "fall", "winter"],
    name: ""
  }
  mapTestChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  mapTestClick = (e) => {
    this.setState({
      seasons: this.state.seasons.concat(this.state.name),
      name: ""
    })
  }
  mapTestDeleteClick = (i) => {
    this.setState({
      seasons: [
        ...this.state.seasons.slice(0, i),
        ...this.state.seasons.slice(i + 1, this.state.seasons.length)
      ]

    })
  }
  render() {
    const { seasons, name } = this.state;
    const { mapTestChange, mapTestClick, mapTestDeleteClick } = this;
    const seasonList = seasons.map(
      (season, i) => (
        <li key={i} onClick={() => this.mapTestDeleteClick(i)}>{season}</li>
      )
    );
    return (
      <div>
        <input type="text"
          name="name"
          placeholder="input seasons"
          value={name}
          onChange={mapTestChange}
        />
        <button onClick={mapTestClick}>add</button>
        <ul>
          {seasonList}
        </ul>
      </div>
    );
  }
}

export default Test;

first, we click on the one we want to delete, and we send an onClick event to delete it and pass the index value as a unique parameter.

Use the following spread and slice() to work out the index of the selected part.

 mapTestDeleteClick = (i) => {
    this.setState({
      seasons: [
        ...this.state.seasons.slice(0, i),
        ...this.state.seasons.slice(i + 1, this.state.seasons.length)
      ]
    })
  }