Ad

React.js Conditional Render If Search Dropdown Has Any Element

- 1 answer

I'm new in React and trying to do simple search form with dropdown. When you enter any word in the input, render() makes the list depending of prop name. So, I want to make a conditional render with drop - if there is nothing in list, it would render nothing. I tried to do this by checking list length, but it is always 5. P.S. in adition, how do I ignore case of input value by using includes() function?

import React, { Component } from 'react';
import FoundedIngridient from './FoundedIngridient';

export default class FoundedIngridients extends Component {
    ingridients = [
        {
            img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
            name: 'Martini'
        },
        {
            img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
            name: 'Beer'
        },
        {
            img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
            name: 'Jim Beem'
        },
        {
            img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
            name: 'Jack Daniels'
        },
        {
            img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
            name: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi, molestiae tempora iste suscipit incidunt aliquid?'
        },
    ]

    state = {
        searchVal: '',
        isDropShown: false
    }

    handleChange = (e) => {
        this.setState({
            searchVal: e.target.value,
            isDropShown: e.target.value == '' ? false : true
        });
    }

    render() {
        const list = this.ingridients.map((ingridient, key) => {
            return (
                ingridient.name.includes(this.state.searchVal.toString()) &&
                <FoundedIngridient
                    key={`drop-${key}`}
                    img={ingridient.img}
                    name={ingridient.name}
                >
                </FoundedIngridient>
            )
        });

        return (
            <div className="form">
                <form action="#">
                    <div className="input-wraper">
                        <input
                            type="text"
                            placeholder="For example, beer.."
                            value={this.state.searchVal}
                            onChange={this.handleChange}
                        />
                    </div>
                    {
                        (
                            this.state.isDropShown &&
                            list.length
                        ) &&
                        <div className="drop">
                            <div className="block">
                                {list}
                            </div>
                        </div>
                    }
                </form>
            </div>
        );
    }
}
Ad

Answer

I created an example of how to implement a list with filter. See on the CodeSandbox.

In your example React doesn't track the list instance, therefore you have 5 as result. You need to move this array to the store and use it in render function.

Ad
source: stackoverflow.com
Ad