Returning two same properties instead of one in ReactJS

user_13531397 0
Viewed 50

I have a problem that my React app saving 2 same properties on one query.

enter image description here

After I enter the data in two input field and click Set button I receive double of same data.

CODE HERE

import React, { useState } from "react";

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");

  const onChangeSymbol = e => {
    setSymbol(e.target.value);
  };

  const onChangePrice = e => {
    setPrice(e.target.value);
  };


  const onClick = () => {
    if (symbol !== "" && price !== "") {
      setQueries((queries) => {
        queries.push(`${symbol}${price}`);
        return queries;
      });
      setSymbol("");
      setPrice("");
    }
  }

  return (
    <div className="App">
      <h6>Price Alert History</h6>
      <ul>
        {queries.map(query => <li>{query}</li>)}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={onChangeSymbol}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={onChangePrice}
      />
      <button type="submit" onClick={onClick}>Set</button>
    </div>
  );
}

GOAL: I just want to receive one property instead of double of it.

reactjs javascript
2 Answers

You need just to fix your function and it will work properly

const onClick = () => {
  if (symbol !== "" && price !== "") {
    setQueries((queries) => {
      return [ ...queries, `${symbol}${price}`] // fix here
    });
    setSymbol("");
    setPrice("");
  }
}


import React, { useState } from "react";

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");

  const onChangeSymbol = e => {
    setSymbol(e.target.value);
  };

  const onChangePrice = e => {
    setPrice(e.target.value);
  };


  const onClick = () => {
    if (symbol !== "" && price !== "") {
      setQueries((queries) => {
        return [ ...queries, `${symbol}${price}`]
      });
      setSymbol("");
      setPrice("");
    }
  }

  return (
    <div className="App">
      <h6>Price Alert History</h6>
      <ul>
        {queries.map(query => <li>{query}</li>)}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={onChangeSymbol}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={onChangePrice}
      />
      <button type="submit" onClick={onClick}>Set</button>
    </div>
  );
}

user_129948960

I would have refactored it so that the price and symbol would be an object with keys

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");

  const onClick = () => {
    if (symbol !== "" && price !== "") {
      const product = {
        symbol: symbol,
        price: price
      };

      setQueries([...queries, product]);
      setSymbol("");
      setPrice("");
    }
  };

  return (
    <div className="App">
      <h6>Price Alert History</h6>
      <ul>
        {queries.map(query => (
          <li>
            {query.symbol} {query.price}
          </li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={e => setSymbol(e.target.value)}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={e => setPrice(e.target.value)}
      />
      <button type="submit" onClick={onClick}>
        Set
      </button>
    </div>
  );
}
user_25646730
Related