React push object into array and map error map not a function

Question

I have an array that has initially 2 values, when I click on the add button I want to add a new object but then it tells me map is not a function. Any help is greatly appreciated. This is not my entire component but what you would need to replicate:

const Equipments = (props) => {

const [equipment,setEquipment]=useState([1,2]);

const addEq =  ( ) => {
console.log('add eq')
var id = equipment.length+1;
setEquipment(equipment.push(id));
console.log('this is the id',id, 'this is the array',equipment)
};


const renderEQForm = (equipment, index) => {
  return (
    <>    
           <label>{equipment.id}</label>
            <Form.Item
              name={['payments', 'method']}
              label="Method:"
              defaultValue = 'Credit Card'>
               <Select  defaultValue = 'Credit Card'>
                 <Option value='Cash'>Cash</Option>
                 <Option value='Check'>Check</Option>
                 <Option  value='Credit Card'>Credit Card</Option>
                 <Option value='Google Pay'>Google Pay</Option>
               </Select>
             </Form.Item>
             <Form.Item
                 
                  name={["equipment", 'brand']}
                  rules={[{ required: false, message: 'Missing brand' }]}
                  label='Brand:'
                >
                  <Input placeholder="Brand" />
                </Form.Item>

                </>
                
  )}

 return (
    <>
      
      {equipment.map(renderEQForm)}
      <button onClick={()=>addEq()}>Add</button>
    </>
    );
    };


export default Equipments

Rostyslav · Accepted Answer · 2021-02-25 19:47:23Z

1

The problem is in this line

setEquipment(equipment.push(id));

equipment.push(id) returns a number NOT an array. Therefore, your state gets set to a Number which doest not have .map function in its prototype.

Your solution is

setEquipment([...equipment, id]);

answered Feb 25, 2021 at 19:47

Rostyslav

2,88612 silver badges18 bronze badges

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

Comments

jean182 · Accepted Answer · 2021-02-25 19:51:10Z

0

Don't use push because that is mutating the array, when you want to change the state of your code copy the existing array and mutate that one, for example using the spread syntax will do what you want

const addEq =  ( ) => {
 console.log('add eq')
 const id = equipment.length+1;
 // This returns a new array with the current equipment items plus the new id.
 setEquipment([...equipment, id]);
console.log('this is the id',id, 'this is the array',equipment)
};

Is worth to notice that the error you're getting is because push returns the new array length(a number) so setting that in the setEquipment would make your equipment a number and map is not a function included in the number object.

edited Feb 25, 2021 at 19:51

answered Feb 25, 2021 at 19:43

jean182

3,5332 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

React push object into array and map error map not a function

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