React update component on state changes

Question

Below is my react component it has two button i want to show list of projects on my page when button is clicked and update that list when other button is clicked but on clicking button second time it not update the list

import React, { useState } from "react"
import ProjectList from './ProjectList'

export default function SearchBar() {

const [showProjects , setProjects] = useState('')

return (

<div>
<div className="container search_project">
<div className="row">
<div className="col-12">

<ul className="list-group list-group-horizontal list-group-flush d-flex flex-wrap" style={{cursor:"pointer"}}>

<li itemID="li" className="list-group-item"><span className="text-success"><strong>Select </strong></span></li>
<li itemID="li" className="list-group-item" onClick = {() => setProjects("showAll") }> <span>first</span></li>
<li itemID="li" className="list-group-item" onClick = {() => setProjects("computerScience")}> second</li>

</ul>

</div>
<div className="col my-4">
<form id = "search-form" style={{paddingBottom: "10px"}}>
<div className="input-group">
<input className="form-control" type="text" name = "name" placeholder="Search Project by Name"/>
<div className="input-group-append"><button className="btn btn-success" type="submit"><i className="fas fa-search"></i></button></div>
</div>
</form>

</div>
</div>
</div>

{showProjects && <ProjectList projects = {showProjects}/>}

</div>
)
}

Answer 1

I don't know if this will help or not but here is something i tried ,similar like yours i guess!! What it does is whenever a new item gets added to list ,App component re renders and also the list that is sent as a prop makes DisplayProjects component render again.

https://code.sololearn.com/Wvz8ldQcI0pu/?ref=app

Answer 2

Abhay sorry for late reply I try two time to answer your question from Solo web version but It cannot post my answer
So the problem is projectList component in useEffect

I am using empty brackets there and then I change it to [props] It works
So thanks for your help bro

Answer 3

https://code.sololearn.com/WK4IL55Q37j5/?ref=app

Answer 4

Calviղ thanks brother

Answer 5

Saad Mughal Hello, Can you just tell what is this component doing exactly ? An example maybe.

Answer 6

Abhay In my case there are two buttons when I click any of the button the state changes and pass some string value to the projectList component but after that when I try to click other button the state may be change but projecyList component not re render and show list according to the previous button not update the list

Answer 7

Abhay
https://code.sololearn.com/WDRPCZ9DzxQj/?ref=app

I modify your code and it's work what I want to do.
But in my first code there me some issue I have to find

Answer 8

Saad Mughal can you show me your ProjectList component code ?