CODEWITHSUNDEEP
reactjs
kajembe
kajembe

Reputation: 25

why value is printed twice on console?

Am trying to print the value of selected color on browser console,I dont understand why it print twice and how to correct it.

const ProductList = () => {
  const [filters, setFilters] = useState({});
  const handleFilters = (e) => {
    const value = e.target.value;
    const name = e.target.name;
    setFilters({
      [name]: value,
    });
  };
  console.log(filters);
   
  return (
    <Container>
      <Announcement />
      <Navbar />
      <Title>Dresses</Title>
      <FilterContainer>
        <Filter>
          <FilterText>Filter Products:</FilterText>
          <Select name="color" onChange={handleFilters}>
            <Option disabled>color</Option>
            <Option>white</Option>
            <Option>black</Option>
            <Option>red</Option>
            <Option>pink</Option>
            <Option>brown</Option>
            <Option>green</Option>
            <Option>milk</Option>
          </Select>
        </Filter>
      </FilterContainer>
      <Products />
      <Newsletter />
      <Footer />
    </Container>
  );
};
export default ProductList;

[![console image][1]][1][1]: https://i.sstatic.net/QKPHu.png

Upvotes: 0

Views: 52

Answers (1)

yanir midler
yanir midler

Reputation: 2702

This is because of React Strict Mode code.

Remove -> React.StrictMode, from ReactDOM.render code.

Will render 2 times on every re-render:

ReactDOM.render(
  <React.StrictMode>
<App />
  </React.StrictMode>,
  document.getElementById('root')
);

Will render 1 time:

ReactDOM.render(
  <>
<App />
  </>,
  document.getElementById('root')
);

Upvotes: 1

Related Questions