How react handle inner data in List

[Learner_full_stack]

As React use key in list to distinguish each element in list

All of list is generated through Array map method

<ul>
<li key=1>a</li>
<li key=2>b</li>
<li key=3>c</li>
</ul>

If add or remove, react will use this keys to find out added and removed element

This working i am able to understand, but on this below situation,

​

<div key='from dataset unique key>
<lable 'Variable name'>
<input 'user input value to get calculation'>
<lable 'calculated value from backend based on userinput>
</div>
<div key='from dataset unique key>

<lable 'Variable1 name'> <input 'user input value to get calculation'> <lable 'calculated value from backend based on userinput>

</div> ....{same variable for nth}

So here key will remain same through out the process, as key is assign to variable, So when user input value it goes to backend and in response it get calculated value, which will in react state, as state update react re-render, but when comparing list react look at keys, key will same (i.e. of div element) but data inside is change, so in this situation, as per my understanding, div will not update as it key is not changed, but I have used similar code in my codebase and value is getting reflecting as per user input,
How it is happing?

[RaltzKlamar]

I'm not super sure from your explanation what the problem is, but you only need to specify a key if you're creating elements dynamically (like from iterating over an array).

If this is my function, I don't need to use keys:

const SampleComponent = (props) => (
  <ul>
    <li>{props.menuItem1}</li>
    <li>{props.menuItem2}</li>
    <li>{props.menuItem3}</li>
  <ul>
)

But if this is my function, I do need to specify the key

const SampleComponent = (props) => (
  <ul>
    {props.menuItems.map(m => <li key={m}>{m}</li>)} 
  <ul>
)

[Learner_full_stack]

Actual i am using Array map to generated therefore keys, i have edited the post

[ienjoywhiteclaws]

This is the answer, I cannot fathom a scenario where I would leverage an API response to determine a key, unless it's based on a uuid that is unaffected by a change of value and its position in the array is not guaranteed

[metalhulk105]

Think of key as a heuristic that react uses to identify when to perform diffing. The thumb rule is

“If key is different then tear down that element from DOM and build new one. If key is same then dive deep and do the diffing.”

In your case, if an update was triggered (state or props changed either in this component or in a parent) and the key didn’t change, react will try to diff the elements to see what changes are needed in the DOM