Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

67
Views
React: can't add an array of objects to the product

I'm trying to add the selected attributes(radio buttons) to the product.ps:// when im not using this.setState in the handleChange function , this almost works, except for the fact that instead of getting an array of multiple objects with selected attributes, I get an array of single object with multiple keys/values.

render() {
    
    let product = this.state.currentProduct;
    let selectedAttributes = [];
    let testobj = {};

 let handleChange = (evt,attribute) => {
      let test = Object.assign({}, product);
      testobj[attribute] = evt.target.value;
      selectedAttributes.push(testobj);
      let noDuplicates = [...new Set(selectedAttributes)];
      test.selectedAttributes = noDuplicates;
      this.setState((state) => ({
        currentProduct: test,
      })) 
    }

return (
      <>
                <ul className={`attributesList ${attribute.id}`} key={attribute.id}>
                  {product.attributes[i].items.map((item) => {
                    return (  
                      <li>
                        <input className={attribute.id} onChange={(evt) => handleChange(evt,attribute.id)} type="radio" id={`attribute ${attribute.id} ${item.id}`} name={`attributesList ${attribute.id}`} value={item.displayValue}/> 
                        <label className={`attribute ${item.id}`} style={{backgroundColor: item.value}} htmlFor={`attribute ${attribute.id} ${item.id}`}>{item.displayValue}</label>
                      </li>
                    )
                  })}
                  </ul>
7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.