How can i stop onChange from changing the input of states directly-CodePudding

I have to display the url and shortened URL, but each time I try to input a new URL, it changes the value of already displayed Url. How can I precent this? I'm using setUrl([newUrl,...url]);, I guess that's where the problem lies

My complete code:

import { useEffect, useState } from "react";
import GetStarted from "./components/GetStarted";
import NavBar from "./components/NavBar";
import StatSection from "./components/StatSection";
import SearchBar from "./components/UrlShortener/SearchBar";



function App() {
  const [url, setUrl] = useState([]);
  const [shortenedUrl, setShortenedUrl] = useState([]);
  const apiUrl = `https://api.shrtco.de/v2/shorten?url=${url}`;

  const handleChange = (e) => {
    const newUrl = e.target.value;
      setUrl([newUrl,...url]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(apiUrl, {
        // Adding method type
        method: "POST",
      });
      const data = await response.json();
      const shortLink = data.result.full_short_link;
      setShortenedUrl([shortLink,...shortenedUrl]);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <NavBar />
      <GetStarted />
      <SearchBar
        onChange={handleChange}
        handleSubmit={handleSubmit}
        shortenedUrl={shortenedUrl}
        url={url}
      />
    </>
  );
}

export default App;

CodePudding user response：

The Below code will solve your issue.

import { useEffect, useState } from "react";
import GetStarted from "./components/GetStarted";
import NavBar from "./components/NavBar";
import StatSection from "./components/StatSection";
import SearchBar from "./components/UrlShortener/SearchBar";



function App() {
  const [url, setUrl] = useState('');
  const [shortenedUrl, setShortenedUrl] = useState('');
  const apiUrl = `https://api.shrtco.de/v2/shorten?url=${url}`;

  const handleChange = (e) => {
    const newUrl = e.target.value;
    setUrl(newUrl);
    if(shortenedUrl){
       setShortenedUrl('');
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(apiUrl, {
        // Adding method type
        method: "POST",
      });
      const data = await response.json();
      const shortLink = data.result.full_short_link;
      setShortenedUrl(shortLink);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <NavBar />
      <GetStarted />
      <SearchBar
        onChange={handleChange}
        handleSubmit={handleSubmit}
        shortenedUrl={shortenedUrl}
        url={url}
      />
    </>
  );
}

export default App;

CodePudding user response：

    function App() {
  const [url, setUrl] = useState('');
  const [shortenedUrl, setShortenedUrl] = useState('');
  const apiUrl = `https://api.shrtco.de/v2/shorten?url=${url}`;

  const handleChange = (e) => {
      setUrl(e.target.value);
  };

const handleSubmit = async (e) => {
e.preventDefault();
try {
  const response = await fetch(apiUrl, {
    // Adding method type
    method: "POST",
  });
  const data = await response.json();
  const shortLink = data.result.full_short_link;
  setShortenedUrl(shortLink);
} catch (error) {
  console.log(error);
}};


and you should set value for input => <input value = {url} />