Default value with react-select and condition are not working ( used to work on local json before I-CodePudding

Why is my defaultValue in react-select doesnt work?

export default function MenuItemDisplay() {
...
    const [dish, setDish] = useState([])

    useEffect(() => {
        axios.post(url, { dishId })
            .then(res => {
                console.log(res)
                setDish(res.data.dishes)
            })
            .catch(err => {
                console.log(err)
            })
    }, [dishId]);

    const TASTE = [
        { label: "Good", value: "Good" },
        { label: "Medium", value: "Medium" },
        { label: "Bad", value: "Bad" }
    ];


    return (
        <>
            <Dropdown
                style={styles.select}
                options={TASTE}
                defaultValue={TASTE.find((t) => t.label === dish.map((e) => e.taste))}
                isMulti={true}
            />

            {(dish.map((e) => e.menu) !== "") ?
                <div>
                    Menu
                    <div >
                        {dish.map((e) => e.menu)}
                    </div>
                </div>
                : ""
            }
        </>
    );
}


export default function Dropdown({
  style,
  options,
  styleSelect,
  defaultValue
}) {
  const [selected, setSelected] = useState(defaultValue);

  return (
    <div style={style}>
      {selected ? (
        <Tag
          selected={selected}
          setSelected={setSelected}
          styleSelect={styleSelect}
        />
      ) : (
        <Select value={selected} onChange={setSelected} options={options} />
      )}
    </div>
  );
}

I don't understand why is it not working since dish.map((e) => e.taste) return me "Medium".

Plus I have my content dish.map((e) => e.menu) that is empty, so it's not supposed to appear with my condition but it is.

Just for information, this code was working with local json files before I use api

Here is my code (working for local json), the url is not given for confidential purposes, and the json result for dishId:1 is in menu1_api.json

CodePudding user response：

A possible fix:

<Dropdown
    style={styles.select}
    options={TASTE}
    defaultValue={TASTE.find((t) => t.label === dish.find((d) => d.id === dishId))}
    isMulti={true}
/>

The other part I could not undestand what you're trying to do, but it is wrong. As Cristiano replyied, you are comparing different types using !==, so it will never be a true condition. Maybe use the same fix as above?

(dish.find((d) => d.id === dishId).menu !== "")

EDIT AND REEDIT

Given more information, this could fix:

export default function MenuItemDisplay() {
...
    const [dish, setDish] = useState(null)

    useEffect(() => {
        axios.post(url, { dishId })
            .then(res => {
                console.log(res)
                // make your dish variable not array
                setDish(res.data.dishes[0])
            })
            .catch(err => {
                console.log(err)
            })
    }, [dishId]);

    const TASTE = [
        { label: "Good", value: "Good" },
        { label: "Medium", value: "Medium" },
        { label: "Bad", value: "Bad" }
    ];

    if (!dish) {
        return (
            <div>Loading</div>
        );
    }

    return (
        <>
            <Dropdown
                style={styles.select}
                options={TASTE}
                // remove map cuz it is not array
                defaultValue={TASTE.find((t) => t.label === dish.taste)}
                isMulti={true}
            />
            {/* remove map cuz it is not array */}
            {dish.menu !== "") ?
                <div>
                    Menu
                    <div >
                        {question.map((e) => e.menu)}
                    </div>
                </div>
                : ""
            }
        </>
    );
}

CodePudding user response：

You are comparing a string (t.label) using === operator with array (result of dish.map) in defaultValue definition.

Try to change it.