React shows values in console but does not render them

user_14859792 0
Viewed 695

I am trying to load the options of a select depending on another select. I extract the data from an array (which will later have much more data).

My problem is that I can't render the second select. I get the data correctly filtered but the options are not added. In the two "console.log" of the code, you can see that I commented aside, the result shown in console.

Any idea what I'm failing? I am a newbie in react. I apologize if the code is very horrible! Any help will be welcome.

P.S. I don't know if it makes any difference in this case, but I'm using "Ant Design".

import React, { useState } from 'react';
import { Row, Col, Form, Select, Input } from 'antd';


export default function SelectPetZone(props) {
    const { publicationData, setPublicationData } = props;
    const { Option } = Select;

    const arrayZones = [
      {
        departmentName: "Montevideo",
        neighborhood: ['Centro', 'Cordón', 'Flor de Maroñas', 'Manga']
      },
      {
        departmentName: "Canelones",
        neighborhood: ['Las Piedras', 'El Dorado', 'Progreso', 'La Paz']
      }
    ];

    const optionsDepartments = [];
    const [optionsNeighborhood, setoptionsNeighborhood] = useState([]);


    for(const item of arrayZones) {
        optionsDepartments.push(<Option key={item.departmentName} value={item.departmentName}> { item.departmentName } </Option>);
    }


    const chargeNeighborhood = e => {
        // Set department
        setPublicationData({ ...publicationData, department: e });

        // Load neighborhood
        for(const i of arrayZones) { 
            if(e === i.departmentName) {
                for(const j of i.neighborhood) {  
                    console.log(j); 
                    setoptionsNeighborhood(...optionsNeighborhood, <Option>{j}</Option>);
                    
                }            
            }
        }
    }



    return (
        <>
            <Row>
                <Col lg={6}>
                    <Form.Item>
                        <Select placeholder='Departamento' onChange={chargeNeighborhood} value={publicationData.department} >
                            {optionsDepartments}
                        </Select>
                    </Form.Item>
                </Col>
                <Col lg={6} offset={3}>
                    <Form.Item>
                        <Select placeholder='Barrio' onChange={e => setPublicationData({ ...publicationData, neighborhood: e })} value={publicationData.neighborhood} >                            
                            {optionsNeighborhood}
                        </Select>
                    </Form.Item>
                </Col>                
            </Row>
        </>
    )
}
antd reactjs javascript
1 Answers

In react, we have something called UseState() First,

import React, { useState } from 'react';

Then Change

const optionsNeighborhood = [];

To

const [optionsNeighborhood, setoptionsNeighborhood] = useState([])

Then Change

        for(const i of arrayZones) { 
            if(e === i.departmentName) {
                for(const j of i.neighborhood) {  
                    console.log(j); // ==>  Print the correct data                  
                    optionsNeighborhood.push(j);
                }            
            }
        }

to

        for(const i of arrayZones) { 
            if(e === i.departmentName) {
                for(const j of i.neighborhood) {  
                    console.log(j); // ==>  Print the correct data                  
                    setoptionsNeighborhood([...optionsNeighborhood, j]);
                }            
            }
        }
user_134361560
Related