Create search box in the list in react js component

user_10423668 0
Viewed 190

Please tell, how to carry out search in the list of components which code is specified below correctly? The search should be performed by title or full description of the list item. Component with list of Item components:

const PathItems = () => {
    const dispatch = useDispatch();
    const pathDescription = useSelector(state => state.firestore.ordered.pathDescription);
    const handleClick = (path) => {
        dispatch(selectPath(path));
    }
    if(pathDescription && pathDescription.length !== 0){
        return (
            <React.Fragment>
                <Row>
                    <Col className="pl-0 border-right border-dark">
                        {pathDescription && pathDescription.map(item => (
                            <PathItem
                                key={item.id}
                                item={item}
                                onInfoChange={ handleClick }
                            />
                        ))}
                    </Col>
                    <Col>
                        <FullDecript/>
                    </Col>
                </Row>
            </React.Fragment>
        )
    } else {
        return (
            <h5 className="text-muted text-center text-middle">Add your first route</h5>
        )
    }

}
export default compose(firestoreConnect(()=> ['pathDescription']))(PathItems);

Item component code:

const PathItem = ({ item, onInfoChange }) => {
    const handleClick = () => {
        onInfoChange(item);
    }
    return (
        <React.Fragment>
            <Card as="a"
                  style={{cursor: 'pointer'}}
                  className={'mb-2'}
                  onClick={ handleClick }>
                <Card.Body>
                    <Row className="align-items-center">
                        <Col xs={1}>
                        </Col>
                        <Col xs={7}>
                            <h5>{item.title}</h5>
                            {item.sDescript}
                        </Col>
                        <Col xs={4} className="text-right">
                            <label>{item.length}600 km</label>
                        </Col>
                    </Row>
                </Card.Body>
            </Card>
        </React.Fragment>
    );
}
export default PathItem;

General view of the described components General view of the described components Thanks in advance)

reactjs
1 Answers
...
const [searchQuery, setQuery] = useState("");

    const inputEvent = (event) => {
        const data = event.target.value;
        console.log(pathDescription);
        setQuery(data);
    }

    const filterItems = pathDescription && pathDescription.filter(item => {
        return item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
            item.fDescript.toLowerCase().includes(searchQuery.toLowerCase());
    })
...
<Col className="pl-0 border-right border-dark" style={divStyle}>
                        <InputGroup className="mb-3">
                            <FormControl
                                type="text"
                                placeholder="Type..."
                                aria-describedby="basic-addon2"
                                value={ searchQuery }
                                onChange={ inputEvent }
                            />
                            <InputGroup.Append>
                                <Button variant="outline-secondary">
                                    <img
                                        alt="Logo"
                                        src="https://cdn1.iconfinder.com/data/icons/app-user-interface-line/64/search_focus_user_interface_app_zoom-256.png"
                                        width="25"
                                        height="25"
                                        className="d-inline-block align-top"/>
                                </Button>
                            </InputGroup.Append>
                        </InputGroup>
                        {filterItems.sort((a, b) => b.favorite - a.favorite).map(item => (
                            <PathItem
                                key={item.id}
                                item={item}
                                onInfoChange={ handleClick }
                            />
                        ))}
                    </Col>
user_104236680
Related