How do I get the new updated data from react hooks or useEffect?

Question

How do I get the newly updated data from react hooks or useEffect?

I loaded the parent components with the title: Shoes then change the input to "New Shoes" but the data inside my child components doesn't change, its still "Shoes". how do I get it updated?

in the parent components:

<UrlInput
   value={url}
   title={title}
   baseURL={baseURL}
   onChange={this.onURLChange}
/>

Child component

const UrlInput = ({title}) => {
    const [newTitle, setTitle] = useState(title);

     useEffect(() => {
         console.log(title)
         setTitle(newTitle)
     })

  return (

  );
};

Why Is the title variable with a capital T in your useState constructor? — Towerss
– Towerss, Commented Jun 9, 2020 at 5:27

Shubham Khatri · Accepted Answer · 2020-06-09 05:26:12Z

3

You should add title as a dependency to useEffect and update state with title and not newTitle. Also the original state needs to be set with title and not Title.

const UrlInput = ({title}) => {
    const [newTitle, setTitle] = useState(title);

     useEffect(() => {
         console.log(title)
         setTitle(title)
     }, [title]);

  return (

  );
};

P.S. Also its an antipattern to copy props into state when state is directly derivable from props unless you need to modify the state locally.

answered Jun 9, 2020 at 5:26

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Khatri Over a year ago

Could you please share how you are updaring title in parent and does it trigger a re-render in child

Prabesh Gautam · Accepted Answer · 2020-06-09 05:54:08Z

1

const UrlInput = ({title, ...rest}) => {
    const [newTitle, setTitle] = useState(title);

     useEffect(() => {
         console.log(title)
         setTitle(title)
     },[title]) 

  return (

  );
};

try replacing the code with the above one .You should pass a new value into setTitle() you were passing the same variable that stored the previous value.

answered Jun 9, 2020 at 5:54

Prabesh Gautam

112 bronze badges

Comments

Md. Abu Sayed · Accepted Answer · 2020-06-09 05:36:25Z

0

For the get, any state-specific change in a component use the useEffect(() => {},[specific condition here]).

You can follow this code here.

in the parent components:

const [title, setTitle] = useState('');  // initial state parent 
const onURLChange = e => setTitle(e.target.value) ; set state parent from children triger 

<UrlInput
    value={url}
    title={title}
    baseURL={baseURL}
    onChange={this.onURLChange}
/>

Child component

const UrlInput =props => {
    const [newTitle, setTitle] = useState(props.Title);

     useEffect(() => {
         console.log(title)
         setTitle(newTitle)
     },[props.Title])

  return (

  );
};

answered Jun 9, 2020 at 5:36

Md. Abu Sayed

2,5363 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

How do I get the new updated data from react hooks or useEffect?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related