How to create and use a map in ReactJS

Question

I have a Spring-Boot app with a ReactJS front-end, and I'm trying to figure out how to use Semantic UI to use a value selected from one input field to populate another input field.

I think I have most of the pieces in place, but I'm trying to figure out how to select a value from an array of name/value objects based on the name. I haven't quite gotten how the "map" function works, and the examples I've seen so far choose based on an index rather than a value. How to code it so it chooses the entry based on the value?

For example, here's the array:

const productMap = [
  {key: 'template_key1', value: 'Product 1'},
  {key: 'template_key2', value: 'Product 2'},
  {key: 'template_key3', value: 'Product 3'}
}

I have a method that gets called when the user selects the key:

 handleSelectTemplateChange=(event,{value})=>{
    let item = {...this.state.item};
    item.template = value;

    // how should this be coded?  
    item.product = productMap.getValue(item.template); 

    this.setState({item});
  }

Guru Hadadi · Accepted Answer · 2020-06-02 15:26:50Z

1

You can use array find too. It is ideal to use find instead of map/forEach because we don't need to map over all the array elements once we find desired product.

const productMap = [
  { key: "template_key1", value: "Product 1"},
  { key: "template_key2", value: "Product 2" },
  { key: "template_key3", value: "Product 3" },
];

handleSelectTemplateChange = (event, { value }) => {
  let item = { ...this.state.item };
  item.template = value;
  const productValue = productMap.find((product) => product.key === value);
  item.product = productValue.value;
  this.setState({ item });
};

edited Jun 2, 2020 at 15:26

answered Jun 2, 2020 at 15:19

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

Comments

Jack BeNimble · Accepted Answer · 2020-06-02 15:15:29Z

0

I found a good description at this site.

Here's the code that seems to work:

   item.template = value;
    productMap.map(entry =>{
      if (value === entry.key){
        item.product = entry.value; 
      }
    })

answered Jun 2, 2020 at 15:15

Jack BeNimble

36.9k46 gold badges141 silver badges233 bronze badges

Collectives™ on Stack Overflow

How to create and use a map in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related