Make list.js and react.js work together

This is vanila code to run list.js in the browser. And it works with no problem

<script src="http://listjs.com/no-cdn/list.js"></script>
<div id="users">
<input class="search" placeholder="Search" />
<ul class="list">
    <li>
        <h3 class="name">Jonny Stromberg</h3>
    </li>
    <li>
        <h3 class="name">Jonas Arnklint</h3>
    </li>
    <li>
        <h3 class="name">Martina Elm</h3>
    </li>
</ul>
</div>
<script>
var options = { valueNames: [ 'name' ] };
var userList = new List('users', options);
</script>

So I thought it will be simple to that in react, I tried this

import React from "react";
import ReactDOM from "react-dom";

    class Home extends React.Component{
        componentDidUpdate(){
            const options = { valueNames: [ 'name' ] };
            const userList = new List('users', options);
        }
        render(){ 
            return(
                <div id="users">
                    <input class="search" placeholder="Search" />
                    <ul class="list">
                        <li>
                            <h3 class="name">Jonny Stromberg</h3>
                        </li>
                        <li>
                            <h3 class="name">Jonas Arnklint</h3>
                        </li>
                        <li>
                            <h3 class="name">Martina Elm</h3>
                        </li>
                    </ul>
                </div>
            )
        }
    }

    const app = document.getElementById('app');

    ReactDOM.render(<Home />, app);

index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>

But it's not working. And specially no error at all. What could be done here?

Solution

You can do it like so., however it is not React way, I think there are a lot of the React components to filter lists.

class Home extends React.Component{
  componentDidMount() {
    const options = { valueNames: [ 'name' ] };
    const userList = new List(this.refs.users, options);
  }

  render() { 
    return <div ref="users">
      <input className="search" placeholder="Search" />
      <ul className="list">
        <li><h3 className="name">Jonny Stromberg</h3></li>
        <li><h3 className="name">Jonas Arnklint</h3></li>
        <li><h3 className="name">Martina Elm</h3></li>
      </ul>
    </div>
  }
};

Example

Note - in React you must use className instead of class

Example without List.js

class Home extends React.Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      names: ['Jonny Stromberg', 'Jonas Arnklint', 'Martina Elm']
    };
  }

  handleChange(e) {
    const condition = new RegExp(e.target.value, 'i');
    const names = this.state.names.filter(name => {
      return condition.test(name);
    });

    this.setState({
      names
    })
  }

  render() { 
    const names = this.state.names.map((name, index) => {
      return <li key={ index }>
        <h3 className="name">{ name }</h3>
      </li>
    });

    return <div>
      <input 
        className="search" 
        placeholder="Search" 
        onChange={ this.handleChange } 
      />
      <ul className="list">{ names }</ul>
    </div>
  }
};

Example