I'm trying to render certain inputs if a variable is true but when the component render displays the warning Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode.

Here is the code of the Material-ui Dialog which receive some props, one of them is the one that I validate to show or not a pair of select inputs.

What I'm doing is validate if the variable is true, show them if not, don't show them.

    states...
    requests...
    onSubmit...

    return (
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <Collapse in={open}>
                <Alert severity={severity}>{alertMsg}</Alert>
            </Collapse>
            <DialogTitle>Proceso de factura.</DialogTitle>
            <DialogContent>
                <Container>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="vus"
                        name="vus"
                        label="Valor unitario de servicio."
                        fullWidth
                        variant="outlined"
                        onChange={handleChange}
                        value={vus}
                    />
                    <TextField
                        margin="dense"
                        id="discount"
                        name="discount"
                        label="Descuento"
                        fullWidth
                        variant="outlined"
                        onChange={handleChange}
                        value={discount}
                    />
                    <TextField
                        margin="dense"
                        id="paymentMeth"
                        name="paymentMeth"
                        label="Método de pago"
                        fullWidth
                        variant="outlined"
                        onChange={handleChange}
                        value={paymentMeth}
                    />
                    <TextField
                        margin="dense"
                        id="payment"
                        name="payment"
                        label="Forma de pago"
                        fullWidth
                        variant="outlined"
                        onChange={handleChange}
                        value={payment}
                    />
                    {requiresCCP ? (
                        <>
                            <Box className={classes.formInputs}>
                                <FormControl fullWidth>
                                    <InputLabel id="select-vehicle">
                                        Vehículo
                                    </InputLabel>
                                    <Select
                                        labelId="select-vehicle"
                                        id="vehicleSelect"
                                        name="vehicleSelect"
                                        value={vehicle}
                                        label="Vehículo"
                                        onChange={handleChange}
                                    >
                                        {allVehicles.map((vehicle, index) => {
                                            return (
                                                <MenuItem
                                                    value={vehicle._id}
                                                    key={index}
                                                >
                                                    {vehicle.PlateNumber} -{" "}
                                                    {vehicle.VehicleName} Modelo{" "}
                                                    {vehicle.Model}
                                                </MenuItem>
                                            );
                                        })}
                                    </Select>
                                </FormControl>
                            </Box>
                            <Box className={classes.formInputs}>
                                <FormControl fullWidth>
                                    <InputLabel id="select-contact">
                                        Contacto
                                    </InputLabel>
                                    <Select
                                        labelId="select-contact"
                                        id="contactSelect"
                                        name="contactSelect"
                                        value={contact}
                                        label="Contacto"
                                        onChange={handleChange}
                                    >
                                        value={contact}
                                        onChange={handleChange}
                                        {allContacts.map((contact, index) => {
                                            return (
                                                <MenuItem
                                                    value={contact._id}
                                                    key={index}
                                                >
                                                    {contact.LastNameFather}{" "}
                                                    {contact.LastNameMother}{" "}
                                                    {contact.FirstName} -{" "}
                                                    {contact.OfficialNumber}
                                                </MenuItem>
                                            );
                                        })}
                                    </Select>
                                </FormControl>
                            </Box>
                        </>
                    ) : (
                        ""
                    )}
                </Container>
            </DialogContent>
            <DialogActions>
                <Button onClick={handleClose}>Cancelar</Button>
                <Button variant="contained" type="submit">
                    Completar viaje
                </Button>
            </DialogActions>
        </Box>
    );
};```

CodePudding user response：

Children you are passing inside the sectect element is incorrect. Just remove value and onchange from its children as you are already passing them as props

<Select
    labelId="select-contact"
    id="contactSelect"
    name="contactSelect"
    value={contact}
    label="Contacto"
    onChange={handleChange}
>
    {allContacts.map((contact, index) => {
        return (
            <MenuItem
                value={contact._id}
                key={index}
            >
                {contact.LastNameFather}{" "}
                {contact.LastNameMother}{" "}
                {contact.FirstName} -{" "}
                {contact.OfficialNumber}
            </MenuItem>
        );
    })}
</Select>