Map creates only one li - React - reactjs

Question

I'm making a component that creates Tabs when you click on an item in the navigation menu.
All the controls I do in the father to be able to pass the states between the brothers without problems.
As it is now my code when clicking on a menu item creates a unique <li> and shows the name. If you click on the entire menu item, it does not create a new <li>, but rather updates the old one with the new menu information.
I need that every time I press a menu item a new <li> with its content is created.
I edit my code with #technogeek1995 changes and this the final solution:
class App extends Component {
constructor(props, context){
super(props, context);
["openTabs",].forEach((method) => {
this[method] = this[method].bind(this);
});
this.state = {
navigation: {
menu: [],
},
tabs:{
tabsLi:[],
},
textvalue : "",
showtabs: true,
}
}
componentDidMount() {
fetch('json_menu.php')
.then(response => response.json())
.then(data =>{
this.setState({navigation: data});
//console.log(data)
})
}
openTabs(e, url, iframe, trdtitle){
e.preventDefault();
const state = {...this.state};
state.textvalue = trdtitle.split();
state.tabs.tabsLi.push(state.textvalue);
console.log(state.tabs.tabsLi)
this.setState({ state });
this.setState({
showtabs: false,
});
}
class Tabs extends Component {
render(){
const renderTabs = tabs =>{
return(
<div id="content-tabs" className="tabs">
{( this.props.showtabs)
? (
<>
<div className="waiting-leads">
<p>Parece que todavía no hay ningún lead...</p>
<h3>¡Ánimo, ya llega!</h3>
<img src={imgDinosaurio} alt="Dinosaurio"></img>
</div>
</>
) : (
<ul id="resizable" className="content" >
{this.props.tabs.tabsLi.map((value, index) => {
return (
<li key={index}>
<span>{value}</span>
<Icon icon="cerrar" className='ico-cerrar' onClick={remove_tab(index)}/>
</li>
)
})}
</ul>
)}
</div>
);
}
return (
<>
{renderTabs(this.props.tabs.tabsLi)}
</>
)
}
}
This is the code that is generated when you click on the menu item. The <span> is the one that is updated and no new <li> is created. Ventas is my element menu name.
<ul id="resizable" class="content">
<li>
<span>Ventas</span>
<svg class="ico-cerrar">path</svg>
</li>
</ul>

Answer 1

The issue appears to be related to mutating the state directly. You should see some warnings in the console/terminal about mutating react's state directly. I have updatd your openTabs function so that it no longer mutates the state directly. Instead, I copy state to a local variable, perform the mutations of the local state object. Then, I call setState with the locally updated state object. React will automatically pick up the changes to the state and render the page with the (newly) updated state.
openTabs(e, url, iframe, trdtitle){
e.preventDefault();
const state = {...this.state};
state.textvalue = trdtitle.split();
state.navigation.menu.push(state.textvalue);
state.showtabs = false;
this.setState({ state });
}
Tabs Component needed to be updated to iterate over the list, rather than over the string so it will create a <li> for every element in state.navigation.menu. remove_tab needed to be wrapped in {} instead of "" as well.
class Tabs extends Component {
render() {
return ( <
div id = "content-tabs"
className = "tabs" > {
(this.props.showTabs) ? (
<div className = "waiting-leads" >
<p> Parece que todavía no hay ningún lead... </p>
<h3> ¡Ánimo, ya llega! </h3>
<img src={imgDinosaurio} alt="Dinosaurio"/>
</div>
) : (
<ul id = "resizable" className = "content" >
{this.props.tabs.map((value, index) => (
<li key={index} >
<span>{value}</span>
<Icon icon = "cerrar" className = 'ico-cerrar' onClick={remove_tab(index)} / >
</li>
)
} </ul>
)} </div>
);
}
}

Answer 2

You should use the callback version of state and use the spread syntax to create new objects with new references so that React detects the change in state.
this.state.navigation.menu.push(this.state.textvalue)
Also, this line will push the old textValue and not the new one which is trdtitle.split()
openTabs(e, url, iframe, trdtitle){
e.preventDefault();
const textValue = trdtitle.split()
this.setState(state => ({
textvalue,
showtabs: false,
navigation: {
...state.navigation,
menu: [ ...state.navigation.menu, textValue ]
}
}));
}