React Component List fails to properly update the default value of Input components when filtered then unfiltered

I am currently designing an application that contains a list of values in a list, called modifiers, to be edited by the user to then store for later use in calculations. To make it easier to find a specific modifier, I added a search function to the list in order to pull up the similar modifiers together to the user. However, once the user puts in a value into the filtered list and then unfilters the list, the component incorrectly assigns the values to the wrong modifiers. To be more specific, the ant design <List> component when filtered fails to put the proper defaultValue for each associated input. Namely, when I input a value into the first item in the filtered list and then unfilter it, the List incorrectly places that value within the first element on the unfiltered list, rather than the modifier it was supposed to be associated with. It should be putting the proper value with the associated element by assigning the value that its grouped with in the context I have stored, but it obviously fails to do so.

Here is the Ant Design List Component I am talking about, I have removed some callbacks that aren't necessary to understand the problem. The renderitem prop takes the dataSource prop as an input and maps all of the values into it to be inputs for the <List.Item> components.

const Modifiers = () => {      const [searchFilter, setSearchFilter] = useState(military); //Only for words in search bar, "military" will be replaced with entire data set later      const context = useContext(Context)        const search = value => {          if(value != ""){              setSearchFilter(searchFilter.filter(mod => mod.name.toLowerCase().indexOf(value.toLowerCase()) != -1))          }          else {              setSearchFilter(military)          }      }        const updateContext = (e, name) => {          let id = name.toLowerCase().replace(/ /gi, "_");            if(context.modifiers[id] != undefined){              context.modifiers[id] = parseFloat(e.target.value)          }            }        return (          <Layout>              <SiteHeader/>              <Content style=>                  <Typography>                      <Title level={2} style=>                          Modifier List                      </Title>                  </Typography>                    <List dataSource={searchFilter} header={<div style=> <Title level={3} style=>Modifiers</Title> <Button shape="circle" size="large" icon={<InfoCircleOutlined/>}/> <TagSortButton updateFunction={updateTagFilter}/> <Search allowClear placeholder="Input Modifier Name" enterButton size="large" onSearch={search} style=/></div>} size="large" itemLayout="horizontal" style=                      renderItem={mod => (                          <List.Item extra={parseTags(mod)}>                              <List.Item.Meta description={mod.desc} avatar={<Avatar src={mod.image}/>} title={<div style=><Title level={5}>{mod.name}: </Title> <Input defaultValue={context.modifiers[mod.name.toLowerCase().replace(/ /gi, "_")] != undefined ? context.modifiers[mod.name.toLowerCase().replace(/ /gi, "_")] : ""} id={mod.name} onChange={(e) => updateContext(e, mod.name)} style=/><Title level={5}>{mod.type == "WHOLE NUMBER" ? "" : "%"}</Title></div>}/>                          </List.Item>                      )}                  />              </Content>                          </Layout>      );  }  export default Modifiers;  

Here is the Context Class, the modifiers field is what is the issue currently. It only has 2 currently, but the problem persists when more are added, and these 2 modifiers are the first in the unfiltered list as well.

export class Provider extends React.Component {      state = {          name: "None Selected",          tag: String,          flag: "images/flags/ULM",          modifiers: {              army_tradition: 0,              army_tradition_decay: 0,          }      }        render() {          return (              <Context.Provider value={this.state}>                  {this.props.children}              </Context.Provider>          )      }  }  

Here is what one element in the military array looks like for reference as well. The regex inside the <List.Item> component is merely converting the name field of the object into one that matches whats stored within the context.modifiers field.

export const military = [      {          name: "Army Tradition",          desc: "Adds to the rate of army tradition gained each year.",          function: "ADDITIVE",          type: "WHOLE NUMBER",          category: "MILITARY",          image: "/images/icons/landLeaderFire.png",      },  ...  

https://stackoverflow.com/questions/66838289/react-component-list-fails-to-properly-update-the-default-value-of-input-compone March 28, 2021 at 12:02PM