How can I display one item from this array in the render? - reactjs

Question

I do not know of a way to display these conditions in the render. Nothing is appearing or if I try .map then it gives me errors.
I've tried refactoring, but came up with the same scenario. I've tried assigning the sampleInfo items to a new array but still can't figure out how to display just 1 item from that array in the render.
sampleInfo = [
{
second: 1,
ml: '19ml',
animal: 'Thing1',
weight: '4kg',
capacity: '20ml'
},
{
second: 2,
ml: '38ml',
animal: 'Thing2',
weight: '7kg',
capacity: '35ml'
},
{
second: 3,
ml: '57ml',
animal: 'Thing3',
weight: '12kg',
capacity: '60ml'
}
]
....Some functions here......
onSubmit(onetotwosec, morethantwosec) {
const {time} = this.state;
this.setState((state, props) => ({
scoreArray:state.scoreArray.concat(ms(state.time,{verbose: true})),
time:0,
submit:true
}));
// let myNewanimalArray = state.animalArray.concat({morethantwosec});
// console.log(myNewanimalArray)
let filterAnimal = 0
if((time >= 1000) && (time < 2000)) {
filterAnimal = this.sampleInfo.filter((item) => {
return item.second === 1;
}).map((item) => {
return item.animal
});
console.log(filterAnimal)
}
else if(time > 2000) {
filterAnimal = this.sampleInfo.filter((item) => {
return item.second === 2;
}).map((item) => {
return item.animal
});
console.log(filterAnimal)
}
}
render() {
if((this.state.isOn) === true){
return(
<React.Fragment>
<div>
<h3>Timer:{ms(this.state.time,{verbose: true})}</h3>
</div>
<div>
<button onMouseDown={this.onItemMouseDown} onMouseUp={this.onItemMouseUp}>start</button>
</div>
<div>
<ul>
{this.state.scoreArray.map(function(item,i){
return<li key={i}>{item}</li>
})}
</ul>
</div>
</React.Fragment>
)
} else if ((this.state.isOn) === false){
return(
<React.Fragment>
<div>
<h3>Timer:{ms(this.state.time)}</h3>
</div>
<div>
<button onMouseDown={this.onItemMouseDown} onMouseUp={this.onItemMouseUp}>Start</button><span></span>
<button onClick={this.resetTimer}>Reset</button>
<span></span>
<button onClick={this.onSubmit}>Done!</button>
</div>
<div>
<ul>
{this.state.scoreArray.map(function(item,i){
return<li key={i}>{item}</li>
})}
</ul>
//Here I've tried .map like above but can't figure out what to put!!!!
</div>
</React.Fragment>
I want the Done! button to display the matched animal from the sampleInfo array when the timer reaches a certain time. It should show each item as text such as 'Thing 1' if the timer is between 1 and 2 seconds etc. I can get it to display correctly using the console, but cannot for the life of me think of how to get it into the render. All of the functions are within one class.

Answer 1

I managed it myself (with help from google and all the above - this has taken me 3 days to do such a simple thing), here's the onSubmit function updated:
onSubmit() {
this.setState((state) => ({
scoreArray:state.scoreArray.concat(ms(state.time,{verbose: true})),
time:0,
submit:true
}));
const {time} = this.state;
var filterAnimal
if((time >= 1000) && (time < 2000)) {
filterAnimal = this.sampleInfo.filter((item) => {
return item.second === 1;
}).map((item) => {
return item.animal
}).toString()
this.setState(prevState => ({
animalArray:[filterAnimal,...prevState.animalArray ]})
)
}
And in the render:
{this.state.animalArray}
It works fine. If anyone can see a problem with this do comment.