DEV Community

I have a question .

ivadam00 on March 17, 2023

how do i change or remove state value when i click to a link or navigation link and it should render that link page in react. if anyone know pleas...
Read full post
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Please, add the tags #react #help and #javascript or #typescript (depending on what you are using) to this discussion and provide some source in which we can check the code to give proper directions.

On the other hand, please add detailed acceptance criteria on what do you want to achieve and also define, following the same rules what is currently happening.

This way we can help you better.

Thank you! 😁

Collapse
 
ivadam00 profile image
ivadam00 •

please check edited post

btw thank you for your suggestion, im newbie in the web dev community

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Solution

I can see that you remove the state explicitly inside the handleSubmit function

const handleSubmit = (e) => {
       e.preventDefault();
       setText(''); // <- HERE
}
Enter fullscreen mode Exit fullscreen mode

So instead of applying the search logic (which I fail to find in your code), you are resetting the value of the state to an empty string... 😅

*Check on that and come back either to confirm that the issue is gone or to add further details if the issue persists.*

Debugging

Also you will do good by installing the React Developer Tools Chrome Extension and checking a tutorial on how to use it and learn how to debug.

In VSCode you can add (if not yet present) a directory with the name .vscode to the root of your project and a launch.json file inside, which contents should look like that:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ReactJS: debug",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
  ]
}
Enter fullscreen mode Exit fullscreen mode

So you will be able to run the debugger (F5 shortcut), add break points and inspect the values of each thingy in a given point of time during the runtime execution of your software, hence spotting real quick which is the issue.

Suggestions / side-notes

You said you're a newbie on web development. I don't know if you are following a learning path or not, but if you don't I'd suggest you to do so. There are multiple paths you can find out there, maybe one of the best if you want free resources is FreeCodeCamp, and the order for frontend is as follows:

1- Responsive Web Design.
2- JavaScript Algorithms and Data Structures.
3- Front End Development Libraries (<-- this is React).
4- Data Visualization (<-- this is D3, which you can combine with React later on).
5- Quality Assurance (or fall back to any course on Jest + React-testing-library).

Best regards

Thread Thread
 
ivadam00 profile image
ivadam00 •

oh sorry it was my mistake i forgot to write search logic, so the logic was the data is coming from the api

//search logic
const [text, setText] = useState('')
const [searchTerm, setSearchTerm] = useState(" ") //empty string
const [searchResult, setSearchResult] = useState([]) //empty array

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

const handleSubmit = (e) => {
       e.preventDefault() //prevent default page refresh behavior
      if(text){
       setSearchTerm(text)
       setText('') //to empty input box
     }

}

const searchHandle = async (searchTerm) => {
      const {data} = await axios.get(`www.example-api.com/details/s?val=${searchTerm}`}
     if(data){
          setSearchResult(data)
        }
}
Enter fullscreen mode Exit fullscreen mode

i want to show search result in the result component and when i clicked to submit it gets me the result but when i click to another link page state is still there

and thank you for the roadmap...i will surely follow this.

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇 •

Hi, it is somewhat difficult to follow having pieces of code isolated.

Please follow the Debugging section above so you can check which values you have in the variables at each point of the runtime. You will probably be able to troubleshoot it yourself 😁

Collapse
 
ivadam00 profile image
ivadam00 •

thank you for the comment
please check edited post i explained..
help me thank you again :)