Reading a topic of kafka with react

You should use websocket Kafka proxy like https://github.com/Effyis/kafka2websocket or https://github.com/Microsoft/kafka-proxy-ws, because, AFAIK, there are no browser compatible clients available yet.After that, you will be able to interact with Kafka through websockets

Here's an example of what you could do. In essence, have the component that will render the message information observe the kafka consumer and set that message in the component's state. The component will then render with the new message in state (any time setState is called, causes the component to update itself).

This assumes you want to display a list of messages and the consumer.on callback provides a single message that needs to be added to the list.

var MessageDetails = React.createClass({    //create a render function for this to render the details about a message});var MessageDisplay = React.createClass({    getInitialState: function() {        return { messages: [] };    },    onComponentDidMount: function() {        consumer.on('message', function (message) {            // This updates the state so component will re-render            var messageList = this.state.messages;            messageList.push(message);            this.setState({messages: messageList});        }.bind(this));    },    onComponentWillUnmount: function() {        // Unsubscribe from the consume here.    },    render: function() {        var messageList = this.state.messages.map(function(message) {            return (<MessageDetails id={message.id} etc. />);        });        return (          <div className="commentBox">              {messageList}          </div>        );    }});