CODEWITHSUNDEEP
reactjs
Suhas
Suhas

Reputation: 3

How do I get value of a key value pair in react?

I have the following scenario: A form where one of the input fields value is dependent on the dropdown list selection. Example if i select 'shirts' i want to populate the input field with URL to image of a shirt. I have the following code. I need help with selecting the right value corresponding to the user selection:

class ProductAdd extends React.Component{

constructor(){
    super();
    this.state = { defaultPrice: '$',
                    categoryValue: '',
                    URL: [
                        {
                            shirts: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
                            jeans: "https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
                            jackets: "https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
                            sweaters: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
                            accessories: "https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
                        }
                    ],
                };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);     
}

handleSubmit(e){
    e.preventDefault();
    const form = document.forms.productAdd;
    const product = {
        productName: form.productName.value, 
        category: form.category.value,
        price: form.price.value,
        image: form.image.value
        }
        this.props.createProduct(product);
        form.productName.value="";
        form.category.value="";
        form.price.value="";
        form.image.value="";
    }

handleChange(e){
    this.setState( { defaultPrice: e.target.value });
}



render(){
    let btnClass = [
        'btn',
        'clearfix'
      ]
      btnClass = btnClass.join(' ');

      Object.keys(this.state.URL).map(i => alert(this.state.URL['shirts']));

      //console.log(this.state.URL.shirts);

    return(
        <div>
            <form name="productAdd" onSubmit={this.handleSubmit} className="form">
                <div className="div1">
                    Category <br/>
                    <select name="category" className="selectBox"  onChange={ (e) => this.setState( { categoryValue: e.target.value }) }>
                        <option value="shirts">Shirts</option>
                        <option value="jeans">Jeans</option>
                        <option value="jackets">Jackets</option>
                        <option value="sweaters">Sweaters</option>
                        <option value="accessories">Accessories</option>
                    </select><br/><br/>
                    Product Name <br/>
                    <input type="text" name="productName" /><br/><br/>
                </div>
                <div className="div2">
                    Price Per Unit <br/>
                    <input ref="price" type="text" name="price" onChange={ this.handleChange } value={this.state.defaultPrice} /><br/><br/>                    
                    Image URL<br/>
                    <input type="text" name="image" value={this.state.URL[this.state.categoryValue]} /><br/><br/>
                </div>

                <button className={btnClass}>Add Product</button>
            </form>
    </div>
    );
}

}

Upvotes: 0

Views: 105

Answers (1)

JDB
JDB

Reputation: 25875

Your URL prop is an array:

URL: [
  {
    shirts: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
    jeans: "https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
    jackets: "https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
    sweaters: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
    accessories: "https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
  }
]

So either you need to convert it to an object (which you can use as a map) or you need to get the first item in your array and then select the correct entry.

Option 1

URL: {
  shirts: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
  jeans: "https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
  jackets: "https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
  sweaters: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
  accessories: "https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
}

Option 2

this.state.URL[0][this.state.categoryValue]

If you are new to Javascript, then you might have been confused by the square brackets. Javascript is rather unusual in that you can access object properties with square brackets containing variables.

Upvotes: 1

Related Questions