CODEWITHSUNDEEP
reactjsreact-select
Alexandria
Alexandria

Reputation: 117

Using react-select but placeholder is not showing

I have done some styles as you can see on this sandbox, but I can't figure out the placeholder text for it. I am unsure of why this is happening?

Link to CodeSandbox:

https://codesandbox.io/s/nifty-rgb-ro8to?file=/src/components/Countries.js

export default function Countries({ formValues, setFormValues }) {
  const [data, setData] = useState([]);
  const [search, setSearch] = useState({ country: "" });
  const { register, handleSubmit } = useForm();

  // Fetch Data From Api
  useEffect(() => {
    const fetchData = () => {
      fetch("https://restcountries.eu/rest/v2/all")
        .then((res) => res.json())
        .then((result) => setData(result))
        .catch((err) => console.log("error"));
    };
    fetchData();
  }, []);

  const options = data.map((d) => ({
    label: d.name
  }));

  function handleChange(item) {
    setSearch(item);
  }

  function onSubmit(values) {
    setFormValues({
      ...formValues,
      ...values,
      ...search
    });
    console.log({ ...formValues, ...values, ...search });
  }

  // styles for the select
  const customStyles = {
    option: (provided, state) => ({
      ...provided,
      borderBottom: "1px solid #dede",
      color: state.isSelected ? "#53e3a6" : "green",
      backgroundColor: "white",
      padding: 10
    }),
    control: (base, state) => ({
      ...base,
      color: state.isSelected ? "#53e3a6" : "green",
      border: "1px solid rgba(255, 255, 255, 0.4)",
      boxShadow: "none",
      margin: 20,
      "&:hover": {
        border: "1px solid rgba(255, 255, 255, 0.4)"
      }
    }),
    placeholder: (base) => ({
      ...base,
      // backgroundColor: "black",
      fontSize: "2em",
      color: "black",
      fontWeight: 400
    })
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} className="search">
        <Select
          type="text"
          defaultValue={""}
          placeholder={"Search Country...."}
          value={search.country}
          onChange={handleChange}
          name="Search"
          ref={register}
          options={options}
          styles={customStyles}
        />

        <div>
          <button type="Submit">Submit</button>
        </div>
      </form>
    </>
  );
}

Upvotes: 11

Views: 16269

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81310

You are passing the wrong state to the value props of react-select

Change this line:

value={search}

To:

value={search.country}

Reason: search is a state object which is not falsy, placeholder will only be shown if you pass a falsy value (an empty string or undefined for example)

Live Demo

Edit 66867501/using-react-select-but-placeholder-is-not-showing

Upvotes: 25

Related Questions