Logging the Props in child component gives the updated value whereas state itself defined in the parent still not gets updated

Question

I'm a beginner in React and stuck with some problem. I have two components. one is parent(App.js) which passes its state to child component(CardList). the other is child which receives passed state and use it as props. As I have logged the value of profiles props in CardList it gives the updated value of state that I have defined in the Parent Component(App.js) and whereas state itself defined in the parent still not gets updated. Please refer to the screenshot below:-

Parent Component **App.js**
import React, { useState } from 'react';
import Form from './Form';
import CardList from './CardList';

export default function App() {
      const [profiles, setProfiles] = useState([]);
      const addNewProfile=(profile)=>{
      setProfiles([...profiles, profile]);
      console.log(profiles);
  }
  return (
    <>

  <Form addProfile={addNewProfile}/>
  <CardList profilese={profiles}/>
</>
  );
}

Child Component -- **CardList.js**
import React from 'react';
import Cardi from './Cardi';

 export default function CardList(props)
{

   console.log("Everytime State of Parent change");
     return(
      <div>
         {props.profilese.map(profile => <Cardi key={profile.id} profile={profile}/>)}          
     </div>
       );
}

Another Child Component -- **Form.js**
import React,{useState} from 'react';
import axios from 'axios';
import regeneratorRuntime from "regenerator-runtime";

export default function Form(props)
{
    const[username,setUsername]=useState("");

   const handleSubmit=async(event)=>{
         event.preventDefault();
         try{
        const resp= await axios.get
         (`https://api.github.com/users/${username}`);
         const data=await resp.data;
          props.addProfile(data);
         }catch(err)
         {
             console.log("Exception Occured"+ err);
         }
    }
    return(
     <form  onSubmit={handleSubmit}>
        <input type="text"
         value={username}
         onChange={event=>
            {setUsername(event.target.value)}}

         />
         <button >Search</button>
     </form>
    );
}

**Cardi.js**
import React from 'react';


export default function Cardi(props)
{

console.log(props.profile);
if(props.profile===undefined)
{
    return (
       <div>Can't find that username</div>
    );
}
else{
return (


    <>
       <img src={props.profile.avatar_url}/>
       <div className="info">
      <div className="name">{props.profile.name}</div>
      <div className="company">{props.profile.company}</div>
    </div>
    </>

);
}
}

Possible duplicate of [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Shubham Khatri, May 14 '20 at 10:43

score 1 · Accepted Answer · answered May 14 '20 at 11:43

As mentionned in this post, setState is asynchronous. If you want to see the updated state, you should put console.log outside of addNewProfile function:

const addNewProfile=(profile)=>{
  setProfiles([...profiles, profile]);
}
console.log(profiles); // this will be called each time state is modified by addNewProfile

If you want to log profiles only when they are updated, you can do it with useEffect:

const addNewProfile=(profile)=>{
  setProfiles([...profiles, profile]);
}
useEffect(() => { console.log(profiles) }, [profiles])

Logging the Props in child component gives the updated value whereas state itself defined in the parent still not gets updated

1 Answers1