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;
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.
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)
]
})
}