In this tutorial, I will show you how making a really basic and simple Shopping List with filtering.

I write the code in codepen.

First, you need a container to render the React application, so in the HTML part we create a div with id "reactContainer", could be what you want :

<div id=”reactContainer”>



</div>

Then I wrote a little of SAS code, but i don't taked so mutch time.

body

background: #4abdac

width: 100vw

height: 100vh



.top

background: #fc4a1a

color: white

border: 2px solid white .wb

background: #dfcde3

Now it's the time to start writing some React code. I created just one Component, in a real application you should create some components. First, we add the constructor and the render method.

class App extends React.Component

{

constructor(props)

{

super(props);

this.state = {

todosInit: [‘100 kg Meat’,’Ham’, ‘Cheese’],

todos: [],

};

}



} render()

{

return (

<div>

<div className=”container top”>

<div className=”row”>

<div className=”col-lg-12">

<h2 className=”text-center”>Shopping List</h2>

</div>

</div>

</div>

</div>

);

}



} ReactDOM.render(<App />, document.getElementById(‘reactContainer’));

The state todosInit is responsible to render the initial list, and todos will be storing all todos. Now we are going to add ComponentDidMount for inserting the todosInit in the todos state, and we are going to insert two methods, one to manage state changes in the input field, and other to add the new elements to the list.

class App extends React.Component

{

constructor(props)

{

super(props);

this.state = {

todosInit: [‘100 kg Meat’,’Ham’, ‘Cheese’],

todos: [],

todoText: ‘’,

message: false

};

this.updateTodoText = this.updateTodoText.bind(this);

this.createTodo = this.createTodo.bind(this);

}



componentDidMount()

{

this.setState({

todos: this.state.todosInit,

});

}



updateTodoText (e)

{

this.setState({

todoText: e.target.value

});

}



createTodo (e)

{

e.preventDefault();

this.setState({

todos: […this.state.todos, this.state.todoText],

todoText: ‘’,

});

} render()

{

return (

<div>

<div className=”container top”>

<div className=”row”>

<div className=”col-lg-12">

<h2 className=”text-center”>Shopping List</h2>

</div>

</div>

</div>

<div className=”container wb”>

<div className=”row”>

<form onSubmit={this.createTodo}>

<div className=”col-lg-12 input-group”>

<input type=”text”

className=”center-block”

placeholder=”Insert here…”

value={this.state.todoText}

onChange={this.updateTodoText}

/>

<button className=”btn btn-success center-block”>Create</button>

</div>

</form>

<ul>

{this.state.todos.map((todo) =>

{

return (<li key={Math.floor(Math.random() * 10000) + 1}>{todo}</li>);

}

)}

{this.state.message ? <li>No search results.</li> : ‘’ }

</ul>

</div>

</div>

</div>

);

}



} ReactDOM.render(<App />, document.getElementById(‘reactContainer’));

You need to add a key to an element when you are mapping the elements of a state. I just used a random number, in a real application you shouldn't use it. Now we are going to write the code for the filtering part

filterTodo(e)

{

var updatedList = this.state.todosInit;

updatedList = updatedList.filter((item =>{

return item.toLowerCase().search(

e.target.value.toLowerCase()) !== -1;

}) );

this.setState({

todos: updatedList,

});

if (updatedList == 0 ) {

this.setState({

message: true,

});

} else {

this.setState({

message: false,

});

}

}

Before I show you the complete code with the input field, I am going to explain you the logic of the method filterTodo. This method's is going to be invoked when the input of search field changes, and check with the value is present in the list. The code makes all input values lowercase and with us find some matches it updates the todos state and render on the screen. I created a message state just for showing the message "Results not found" when there's no results for the search.

Now the completed code, and you can read and make some changes in https://codepen.io/nunosoares/pen/zjWpJN . You can reply and show other solutions. Have fun.