Cannot update during an existing state transition without any setState in render() - reactjs

Question

I am learning react and I encountered this error and could not find the solution.
The error I recieve is:
Cannot update during an existing state transition (such as within
render). Render methods should be a pure function of props and
state. at clientsDisplay
(http://localhost:3000/static/js/main.chunk.js:672:39) at div at App
(http://localhost:3000/static/js/main.chunk.js:163:5)
The problem is in this code:
import React from 'react'
import Client from './Client/Client'
const clientsDisplay=(props)=>props.clientsArray.map(
(client,index) =>{
return <Client
clientName={client.name}
clientProjDeadline={client.deadline}
clickDel={props.clientDel(index)}
key={client.id}
changed={event=>props.changed(event,client.id)}
len={props.clArraylength}
/>}
)
export default clientsDisplay
The main component which contains the render function looks like this:
import appCss from './App.module.css';
import React,{Component} from 'react';
import ClientsDisplay from './components/ClientHandle/ClientsDisplay';
class App extends Component{
state = {
userName:'Julian',
showPara: false,
clientsArray: [
{
id:"001",
name: "Max",
deadline: "2021/05/17"
},
{
id:"002",
name: "James",
deadline: "2021/12/06"
},
{
id:"003",
name: "Johnny",
deadline: "2021/07/21"
}
]
}
deleteClient = (delClientIndex)=>{
let clientsArrayCopy=[...this.state.clientsArray]
clientsArrayCopy.splice(delClientIndex,1)
this.setState({
clientsArray:clientsArrayCopy
})
}
valueChanger = (event)=>{
this.setState({
userName: event.target.value
})
}
valueChangerClient = (event,id)=>{
let targetInd=this.state.clientsArray.findIndex(elem=>elem.id===id)
let changedClientArray=[...this.state.clientsArray]
changedClientArray[targetInd].name=event.target.value
this.setState({
clientsArray:changedClientArray
})
}
togglePara = ()=>{
this.setState({
showPara: !this.state.showPara
})
}
render(){
let clientArraylength=this.state.clientsArray.length
return(
<div className={appCss.App}>
<ClientsDisplay
clientsArray={this.state.clientsArray}
changed={this.valueChangerClient}
clientDel={this.deleteClient}
clArrayLength={clientArraylength}/>
</div>
)
}

Answer 1

Currently you're actually calling props.clientDel on every render:
clickDel={props.clientDel(index)}
should be
clickDel={() => props.clientDel(index)}