UIの作成

import React, {useState} from 'react';

const AddFruit = ()=>{
    const [fruitName, setFruitName] = useState('');
    const [fruitCount, setFruitCount] = useState(0);
    const [error, setError] = useState(null);

    const addFruitHandler= ()=>{
        setError(null);
        if(fruitName.length > 0 && Number.isInteger(fruitCount) && fruitCount > 0){
            console.log(fruitName, fruitCount);
        }
        else{
            setError('Please enter a fruit name and count should be more than 0');
        }
    }

    return (
        <div>
            <p className='lead'>Add Fruit Detail</p>
            <input className='form-control my-3' placeholder='Fruit Name' type="text" onChange={(e)=> setFruitName(e.target.value)} value={fruitName} />
            <input className='form-control mb-3' placeholder='Number of fruit' type="number" onChange={(e)=> setFruitCount(parseInt(e.target.value))} value={fruitCount} />
            <button type="button" className="btn btn-primary" onClick={addFruitHandler}>Add fruit</button><br/>
            <p className='text-danger'>{error}</p>
        </div>
    )
}

export default AddFruit;

import React from 'react';

const FruitList = ()=>{
    const  fruits = [
        {name: 'Mango', count: 2},
        {name: 'Gooseberries', count: 3},
    ];

    return (
        <div>
            <h1 className="display-4">Fruits</h1>
            <ul class="list-group list-group-flush w-25">
            {
                fruits.map((fruit, index)=> <li className="list-group-item" key={index}>{fruit.name}{' '}
                <span class="badge bg-info rounded-pill mr-3">{fruit.count}</span>
                </li>)
            }
            {fruits.length === 0 && <p className='lead'>No fruits added yet!</p>}
            </ul>
        </div>
    )
}

export default FruitList;