Creating Basic Text Price Filter in React | Learning purpose

Recently,I have started learning the Reactjs and written small code that takes input value from user and return the values which are greater then number from that list. I have used the create-react-app boiler plate code. React bootstrap is also used in for it. Here is my code, code describes how to handle states and how can use react components with Es6 power capability.
import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from 'react';
import './index.css';
import { Button } from 'react-bootstrap';
import { FormControl } from 'react-bootstrap';
class PriceRow extends React.Component {
    render() {
        return <tr><td>{this.props.category}</td></tr>;
    }
}
class Slider extends Component {
    constructor(props){
        super(props);
        this.state={"data":[10,20,30,40,50],inputValue:''};

    }
    handleClick() {
        var data=this.state.data.filter((v)=>{
            if(v>this.state.inputValue) {
                return v;
            }
        });
        console.log(data);
        this.setState({data:data});
    }
    handleChange(e) {
        this.setState({ inputValue: e.target.value });
    }
    render() {

        var rows=[];
        this.state.data.forEach((d)=>{
            rows.push(<PriceRow key={d} category={d}/>);
        });
        return (
            <div className="slider">
                <FormControl
                    type="text"
                    placeholder="Enter Calculate"
                    defaultValue={this.state.inputValue}
                    onChange={this.handleChange.bind(this)}
                />

                <Button onClick={this.handleClick.bind(this)} bsStyle="primary">Calculate</Button>
            <table>
                <tbody>
            {rows}
                    </tbody>
                </table>
            </div>
        );
    }
}
ReactDOM.render(
    <Slider />,
    document.getElementById('root')
);

Share this post