You have used the record variable two times. First in the outer block of filter function and second in the inner block of map function. So the compiler will not be able to identify which record variable to use and will throw an error.
You have to use another variable for map function like used in the code below.
function ProjectItem(props) {
console.log("props => ",props)
return (
{props.project.id}
)
}
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
id:'a' ,
records: [
{id:"a"},
{id:"b"},
{id:"c"},
{id:"d"},
{id:"e"},
{id:"f"},
{id:"g"},
{id:"h"},
{id:"i"}
]
};
}
render() {
return (
{this.state.records.filter(record => this.state.id == '' || record.id.includes(this.state.id))
.map(rec => (
) )
}
)
}
}
ReactDOM.render(, document.querySelector("#app"))