Print console.log/alert on React Component - reactjs

Question

I'm trying to display data from an Event using Laravel into a React Component. While testing with console.log or alert, the message displays correctly as I wish. But being the noob that I'm, I don't know how to display the new event's data like I'm displaying the table's data using axios in the example bellow.
Like displaying the infos IN the component rather than externally using alert or console.log. Tried return and it didn't work.
React component :
import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
class Patient extends React.Component {
constructor(props) {
super(props)
this.state = {
patients : []
};
}
componentDidMount() {
axios.get('api/patients')
.then(response => {this.setState({patients: response.data})})
.catch(err => console.log(err));
window.Echo.channel('home')
.listen('NewPatient', (data) => {
alert(JSON.stringify(data));
}, (e) => {
alert(data);})
}
render() {
return (
<div>
<ul>
{ this.state.patients.map(patient => <li>{patient.nom}</li>)}
</ul>
</div>
)
}
}
export default Patient;
I want to display the data of this event in an HTML list, so each time there is a new output the list updates itself.
window.Echo.channel('home')
.listen('NewPatient', (data) => {
alert(JSON.stringify(data));
}, (e) => {
alert(data);})

Answer 1

Try set state:
window.Echo.channel('home')
.listen('NewPatient', newPatientData => {
this.setState({
patients: this.state.patients.concat(newPatientData)
})
}, e => {
console.log("Error", e)
})