I want to make mui textfield with array

I want to make mui textfield with array - javascript

what my task is I am using TextFiled according to the Array but the issue is not able to change this all value dynamically I am aware I can use the index to this task based on ternary conditions.
const TextField = () => {
return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.fill("").map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name={index === 0}
size="small"
variant="outlined"
value={data}
/>
</Grid>
))}
</Grid>
</CardContent>
</Card>
</>
);
};

return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from([
"organisationName",
"organisationID",
"manager",
"branch",
"product"
]).map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name="organisationName"
size="small"
variant="outlined"
value={teamForm.values.data}
onBlur={teamForm.handleBlur}
onChange={teamForm.handleChange.bind(this)}
error={Boolean(teamForm.errors.data)}
helperText={teamForm.errors.data}
/>
</Grid>
))}
</Grid>
</CardContent>
<CardActions>
<Box
display="flex"
flexGrow={1}
alignItems="center"
justifyContent="flex-end"
flexDirection="row"
>
<Button
variant="contained"
color="primary"
onClick={teamForm.handleSubmit}
>
Add team
</Button>
</Box>
</CardActions>
</Card>
</>
)

import React from "react";
import {
Grid,
Card,
CardContent,
Box,
CardActions,
TextField,
Button
} from "#mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
const validationSchema = Yup.object().shape({
organisationName: Yup.string().required("Required!"),
organisationID: Yup.string().required("Required!"),
manager: Yup.string().required("Required!")
});
const AddNewTeam = () => {
const teamForm = useFormik({
initialValues: {
organisationName: "",
organisationID: "",
manager: "",
branch: "",
product: ""
},
validationSchema,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
}
});
console.log(teamForm);
return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from([
"organisationName",
"organisationID",
"manager",
"branch",
"product"
]).map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name="organisationName"
size="small"
variant="outlined"
value={teamForm.values.data}
onBlur={teamForm.handleBlur}
onChange={teamForm.handleChange.bind(this)}
error={Boolean(teamForm.errors.data)}
helperText={teamForm.errors.data}
/>
</Grid>
))}
</Grid>
</CardContent>
<CardActions>
<Box
display="flex"
flexGrow={1}
alignItems="center"
justifyContent="flex-end"
flexDirection="row"
>
<Button
variant="contained"
color="primary"
onClick={teamForm.handleSubmit}
>
Add team
</Button>
</Box>
</CardActions>
</Card>
</>
);
};
export default AddNewTeam;

Related

How to create new components on every button click in "React"

So I want when the user clicks on the button, be able to create new CatagoryField Component that I made. When I place the component in a function and call it it will only create the component once. I will appreciate some help. I'm confused about how should I implement this?
App components
import React, { useState } from "react";
import {
Accordion,
AccordionSummary,
Chip,
Button,
IconButton,
Autocomplete,
TextField,
} from "#mui/material";
import { Grid } from "#mui/material";
import SearchBar from "material-ui-search-bar";
import DeleteIcon from "#mui/icons-material/Delete";
import ExpandMoreOutlinedIcon from "#mui/icons-material/ExpandMoreOutlined";
import AddCircleOutlineOutlinedIcon from "#mui/icons-material/AddCircleOutlineOutlined";
import HelpIcon from "#mui/icons-material/Help";
import HistoryToggleOffIcon from "#mui/icons-material/HistoryToggleOff";
import AllMembers from "./components/common/main/allMembers";
import CatagoryField from "./components/common/main/catagoryField";
const autoCompleteOptions = [
{ title: "A", year: 1994 },
{ title: "B", year: 1972 },
{ title: "C", year: 1974 },
{ title: "D", year: 2008 },
{ title: "E", year: 1957 },
{ title: "F", year: 1993 },
{ title: "G", year: 1994 },
];
const App = () => {
const [value, setValue] = useState();
const [element, setElement] = useState(0);
const doSomethingWith = () => {
return null;
};
let i = 0;
const creator = () => {
while (i < element) {
i++;
return (
<CatagoryField
catagoryName="خدماتی"
react="از آنها چیزی میخریم"
createdBy="سیستم"
disable={false}
/>
);
}
};
console.log(element);
return (
<>
<div style={{ margin: "4rem 1rem" }}>
<Accordion>
<AccordionSummary
sx={{ height: "65px" }}
aria-controls="panel1a-content"
>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
<IconButton className="chevron__icon">
<ExpandMoreOutlinedIcon />
</IconButton>
<span className="users__catagory"> دسته بندی کاربران</span>
</Grid>
<Grid item>
<IconButton>
<HistoryToggleOffIcon />
</IconButton>
<IconButton>
<HelpIcon className="help" />
</IconButton>
<span className="version">4.3.2</span>
</Grid>
</Grid>
</AccordionSummary>
<AccordionSummary
sx={{
height: "65px",
padding: "30px",
background: "#E6E6E6",
cursor: "default !important",
}}
aria-controls="panel1a-content"
>
<Grid
container
direction="row"
alignItems="center"
sx={{ display: "relative" }}
>
<Grid item>
<Button
variant="outlined"
sx={{ height: "50px" }}
size="medium"
onClick={() => setElement(element + 1)}
endIcon={
<AddCircleOutlineOutlinedIcon
sx={{ marginRight: "10px" }}
/>
}
>
افزودن دسته جدید
</Button>
</Grid>
<Grid sx={{ width: "207px" }} item>
<SearchBar
className="search__holder"
placeholder="جستجو..."
value={value}
style={{ width: "207px", height: "45px" }}
onChange={(newValue) => setValue(newValue)}
onRequestSearch={() => doSomethingWith()}
/>
</Grid>
<Grid className="sort__field" item>
<Autocomplete
sx={{
width: "207px !important",
padding: "0 !important",
backgroundColor: "white !important",
}}
options={autoCompleteOptions}
getOptionLabel={(option) => option.title}
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
variant="outlined"
label={option.title}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
sx={{
width: "207px !important",
padding: "0 !important",
background: "white !important",
}}
placeholder="مرتب سازی..."
/>
)}
/>
</Grid>
<Grid item>
<IconButton sx={{ margin: "0 5px" }}>
<DeleteIcon />
</IconButton>
</Grid>
<Grid item className="last__edit">
<Grid item>
<span>
آخرین ویرایش:
<a className="last_Modified" href="#">
سیستم
</a>
</span>
<span>1405/12/24 23:59 </span>
</Grid>
</Grid>
</Grid>
</AccordionSummary>
<AllMembers />
<CatagoryField
catagoryName="اپراتور سیستم"
react="اپراتور سیستم"
createdBy="سیستم"
/>
<CatagoryField
catagoryName="مشتریان"
react="به آنها چیزی فروخته ایم"
createdBy="سیستم"
/>
<CatagoryField
catagoryName="خدماتی"
react="از آنها چیزی میخریم"
createdBy="سیستم"
disable={false}
/>
{creator()}
</Accordion>
</div>
</>
);
};
export default App;

The best way in order to achieve the solution is to use a state with useMemo.and the problem with your code is that the creator acts as a function and it will only execute once try this.
import {useMemo} from 'react';
const App = () => {
const [elements , setElements] = useState(0);
const creator = useMemo(() => {
return (
<>
{Array(elements).fill(elements).map((item , index) => (
<CategoryField
key={`cat-${index}`} // key is need when mapping! it is not props
catagoryName="خدماتی"
react="از آنها چیزی میخریم"
createdBy="سیستم"
disable={false}
/>
))}
</>
)
},[elements]);//render when elements change
return (
<>
<div style={{ margin: "4rem 1rem" }}>
<Accordion>
<AccordionSummary
sx={{ height: "65px" }}
aria-controls="panel1a-content"
>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
<IconButton className="chevron__icon">
<ExpandMoreOutlinedIcon />
</IconButton>
<span className="users__catagory"> دسته بندی کاربران</span>
</Grid>
<Grid item>
<IconButton>
<HistoryToggleOffIcon />
</IconButton>
<IconButton>
<HelpIcon className="help" />
</IconButton>
<span className="version">4.3.2</span>
</Grid>
</Grid>
</AccordionSummary>
<AccordionSummary
sx={{
height: "65px",
padding: "30px",
background: "#E6E6E6",
cursor: "default !important",
}}
aria-controls="panel1a-content"
>
<Grid
container
direction="row"
alignItems="center"
sx={{ display: "relative" }}
>
<Grid item>
<Button
variant="outlined"
sx={{ height: "50px" }}
size="medium"
onClick={() => setElements(elements + 1)}
endIcon={
<AddCircleOutlineOutlinedIcon
sx={{ marginRight: "10px" }}
/>
}
>
افزودن دسته جدید
</Button>
</Grid>
<Grid sx={{ width: "207px" }} item>
<SearchBar
className="search__holder"
placeholder="جستجو..."
value={value}
style={{ width: "207px", height: "45px" }}
onChange={(newValue) => setValue(newValue)}
onRequestSearch={() => doSomethingWith()}
/>
</Grid>
<Grid className="sort__field" item>
<Autocomplete
sx={{
width: "207px !important",
padding: "0 !important",
backgroundColor: "white !important",
}}
options={autoCompleteOptions}
getOptionLabel={(option) => option.title}
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
key={`chip-${index}`}
variant="outlined"
label={option.title}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
sx={{
width: "207px !important",
padding: "0 !important",
background: "white !important",
}}
placeholder="مرتب سازی..."
/>
)}
/>
</Grid>
<Grid item>
<IconButton sx={{ margin: "0 5px" }}>
<DeleteIcon />
</IconButton>
</Grid>
<Grid item className="last__edit">
<Grid item>
<span>
آخرین ویرایش:
<a className="last_Modified" href="#">
سیستم
</a>
</span>
<span>1405/12/24 23:59 </span>
</Grid>
</Grid>
</Grid>
</AccordionSummary>
<AllMembers />
<CatagoryField
catagoryName="اپراتور سیستم"
react="اپراتور سیستم"
createdBy="سیستم"
/>
<CatagoryField
catagoryName="مشتریان"
react="به آنها چیزی فروخته ایم"
createdBy="سیستم"
/>
<CatagoryField
catagoryName="خدماتی"
react="از آنها چیزی میخریم"
createdBy="سیستم"
disable={false}
/>
{creator}
</Accordion>
</div>
</>
);
}
export default App;

How to hide a Material UI grid item?

I am trying to hide the grid item of a certain product and let the others slide in. Right now i am using the display:none property but it hides the item instantaneous. I already have the products filtered and i am checking i want to hide the products that are not filtered using somekind an animation. model:
import React, { useState, useEffect } from "react";
import { Container, Grid, Card, Skeleton, useMediaQuery, Grow, } from "#mui/material";
import Filter from "./Filter";
import Product from "./Product/Product";
import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { Box } from "#mui/system";
const Products = () => {
const { category } = useParams();
const [sortOption, setSortOption] = useState("name");
const [newProducts, setNewProducts] = useState([]);
const [menu, setMenu] = useState(false);
useEffect(() => {
const selectedSort = sessionStorage.getItem("sortOption") || "name";
setSortOption(selectedSort);
}, []);
const sort = (items, option) => {
switch (option) {
case "name":
return items.sort((a, b) => (a.name > b.name ? 1 : -1));
case "up":
return items.sort((a, b) => (a.price.raw > b.price.raw ? 1 : -1));
case "down":
return items.sort((a, b) => (a.price.raw < b.price.raw ? 1 : -1));
default:
return items.sort((a, b) => (a.name > b.name ? 1 : -1));
}
};
const mobile = useMediaQuery("(max-width:600px)");
const { products, loading } = useSelector((state) => state.products);
let items = products.filter((product) => product.categories[0].slug === category);
let newItems = [];
newProducts.forEach((product) => {
items.forEach((item) => {
if (item.id === product.id) newItems.push(item);
});
});
if (newProducts.length > 0) newItems = sort(newItems, sortOption);
else newItems = sort(items, sortOption);
const renderProducts = () => (
<>
<Container maxWidth="lg" >
<Grid
container
direction="row"
spacing={3}
sx={{
pl: !mobile && menu && "300px",
transition: ".3s",
}}>
{items.map((product) => (
newItems.some(newItem => newItem.id === product.id) ? (
<Grid item xs={12} sm={6} md={4} lg={3} key={product.id} >
<Product product={product} disable={newItems.some(newItem => newItem.id === product.id)} />
</Grid>
) : null
))}
</Grid>
</Container>
</>
);
const loadingView = () => (
<Container maxWidth="lg" >
<Grid
container
direction="row"
spacing={3}
sx={{
pl: !mobile && menu && "300px",
transition: ".3s",
}}>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
<Box sx={{ p: 2 }}>
<Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
<Card variant="flex" flex="flex">
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
</Card>
<Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
</Box>
<Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
<Box sx={{ p: 2 }}>
<Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
<Card variant="flex" flex="flex">
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
</Card>
<Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
</Box>
<Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
<Box sx={{ p: 2 }}>
<Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
<Card variant="flex" flex="flex">
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
</Card>
<Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
</Box>
<Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
</Grid>
</Grid>
</Container>
);
return <>
<Filter
sortOption={sortOption}
setSortOption={setSortOption}
menu={menu}
setMenu={setMenu}
products={items}
setNewProducts={setNewProducts}
category={category}
/>
{!loading ? renderProducts() : loadingView()}</>;
};
export default Products;

You need to filter the items as you expect by color or size first.
...
const filteredProducts = newItems.filter(newItem => newItem.id === product.id);
...
<Container maxWidth="lg" >
<Grid
container
// You don't need to use direction="row" since it is default props value
spacing={3}
>
{filteredProducts.map((product) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={product.id}>
<Product product={product} disable={newItems.some(newItem => newItem.id === product.id)} />
</Grid>
))}
</Grid>
</Container>
...
If you want to filter the products more accurately, then you could build a customer filter function. Please refer to this.

(MUI 5) styled Componants throwing error in browser theme.palette[ownerState.color] is undefined

I'm having an issue with the latest version of Mui. I'm using a Theme to change the default styling of a text field input the error code has something to do with "./node_modules/#mui/material/FormLabel/FormLabel.js/FormLabelRoot<" I've got the following dependencies
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/material": "^5.0.1",
If anyone has an idea I'd love to hear it :)
import React, { useState } from "react"
import { Button, createTheme, Grid, TextField, Tooltip } from "#mui/material"
import { ThemeProvider } from "#mui/system"
import { AddRounded, CalendarToday, Phone, Email, SearchOutlined, People, Work } from "#mui/icons-material"
import { orange } from "#mui/material/colors"
function App() {
//logic
const [contacts, setContacts] = useState([])
const [addFormData, setAddFormData] = useState({
name: "", email: "", phone: "", dateCreated: "", area: ""
})
/* search reflects the value of the googleesque, search bar. */
const [search, setSearch] = useState("")
/* refrlcts the */
const [searchResults, setSearchResults] = useState([])
const handleAddFormChange = (e) => {
e.preventDefault()
const fieldName = e.target.getAttribute("name")
console.log(fieldName)
let fieldValue = e.target.value
console.log(fieldValue)
const newFormData = { ...addFormData }
newFormData[fieldName] = fieldValue
setAddFormData(newFormData)
}
const handleAddFormSubmit = (e) => {
e.preventDefault()
const newContact = {
name: addFormData.name,
email: addFormData.email,
phone: addFormData.phone,
dateCreated: addFormData.dateCreated,
area: addFormData.area,
split: addFormData.split
}
const newContacts = [...contacts, newContact]
setContacts(newContacts)
}
const handleSearch = (e) => {
e.preventDefault()
setSearch(e.target.value)
if (search !== "") {
const newContactList = contacts.filter((contact) => {
console.log(Object.values(contact).join(" ").toLowerCase())
return Object.values(contact).join(" ").toLowerCase().includes(search.toLowerCase())
})
console.log(search)
console.log(Object.values(contacts).join(" ").toLowerCase())
setSearchResults(newContactList)
} else {
setSearchResults(contacts)
}
}
const theme = createTheme({
palette: {
primary: {
// Purple and green play nicely together.
main: orange[500],
},
},
});
return (
<>
<ThemeProvider theme={theme}>
<Grid container spacing={1} alignItems="center" >
<Grid item>
<SearchOutlined />
</Grid>
<Grid item style={{ marginBottom: "15px", marginTop: "15px" }} >
<TextField type="text" variant="outlined" label="Search" onChange={handleSearch} />
</Grid>
</Grid>
<div >
{/* Main Container with soacing between pairs set to (3) */}
<Grid container spacing={3} >
{/* First pair, people icon + name input */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* icon */}
<Tooltip title="Name" placement="bottom" arrow>
<People />
</Tooltip>
</Grid>
<Grid item>
{/* input */}
<TextField label="Name" variant="outlined" id="name" name="name" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
{/* Second pair */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* icon */}
<Tooltip title="what's your name" placement="bottom" arrow>
<Work />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="Area" variant="outlined" color="colME" id="area" name="area" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
{/* Third Pair */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="name#example.com" placement="bottom" arrow>
<Email />
</Tooltip>
</Grid>
<Grid item>
{/* input */}
<TextField label="Email" variant="outlined" id="email" name="email" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="Ex:(0049)15208513630" placement="bottom" arrow>
<Phone />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="phone" variant="outlined" id="dateCreated" name="phone" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="Format:dd/mm/yyyy" placement="bottom" arrow>
<CalendarToday />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="Date" variant="outlined" id="dateCreated" name="dateCreated" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
</Grid>
<Button style={{ marginBottom: "15px", marginTop: "15px", }} onClick={handleAddFormSubmit} variant="contained" startIcon={<AddRounded />}>
Add
</Button>
</div>
</ThemeProvider>
{/* if there less than 1 character in the search bar render the normal contacts, if not render only the contacts that match the search input... */}
{/* <ContactList contacts={search.length < 1 ? contacts : searchResults} key={contacts.id} /> */}
</>
);
}
export default App;

OP solved their problem, but for those like me that had a similar issue, be sure to check these few things. I'm experiencing these issues since I've upgraded our code-base to the latest version of Material UI.
The issue appears when you use a color or variant prop value not supported in a given component, usually Button, IconButton, or TextField.
Previously color="default" was just fine, but I realized that default was no longer supported. It's current equivalent is inherit.
If you want to support a custom color, you can create a theme that supports that. Read here: Adding new colors (mui.com)

React Edit values are not bind in dynamic input select

I have create an dynamic input select field ,in that field creating editable I am try to bind some data predefined But I am set Data but it takes only index but values are not updated in fields.
My code: https://codesandbox.io/s/dynamic-select-update-n1k9v
Input Fields Data
const [roomInputs, setRoomInputs] = useState([
{ boardBasic: "", roomType: "", adult: "", child: "" }
]);
Predefined Data to set in input fields
const updateData = [
{
id: "1",
boardBasic: "roomOnly",
roomType: "Delux Room",
adult: "2",
child: "2"
},
{
id: "2",
boardBasic: "fullBoard",
roomType: "Delux Room",
adult: "2",
child: "2"
}
];
useEffect(() => {
roomDataInput();
}, []);
const roomDataInput = () => {
setRoomInputs(updateData);
};
Input Fields
<form onSubmit={handleSubmit}>
{roomInputs.map((x, i) => (
<div key={i}>
<Grid container spacing={2}>
<Grid item sm={12} lg={2} xs={12}>
<Select
name="roomType"
placeholder="Room Type"
isSearchable
value={options.value}
options={options2}
onChange={(option) =>
handleRoomChangeType(option, i, "roomType")
}
/>
</Grid>
<Grid item lg={2} sm={12} xs={12}>
<Select
name="boardBasic"
placeholder="Board Basic"
value={options.value}
onChange={(option) =>
handleRoomChangeBoard(option, i, "boardBasic")
}
options={BoardBasic}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
name="adult"
placeholder="Adult"
value={options.value}
onChange={(option) =>
handleRoomChangeAdult(option, i, "adult")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
name="child"
placeholder="Child"
value={options.value}
onChange={(option) =>
handleRoomChangeChild(option, i, "child")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
{roomInputs.length !== 1 && (
<DeleteIcon
onClick={() => handleRemoveClickRoom(i)}
style={{
marginRight: "10px",
marginTop: "4px",
cursor: "pointer"
}}
/>
)}
{roomInputs.length - 1 === i && (
<AddCircleOutlineIcon
onClick={handleAddClickRoom}
style={{ marginTop: "4px", cursor: "pointer" }}
/>
)}
</Grid>
</Grid>
</div>
))}
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</form>

You should change default state value to updateData and remove useEffect:
const [roomInputs, setRoomInputs] = useState(updateData);
// useEffect(() => {
// roomDataInput();
// }, []);
Also set defaultValue for all the selects in the map:
{roomInputs.map((x, i) => (
<div key={i}>
<Grid container spacing={2}>
<Grid item sm={12} lg={2} xs={12}>
<Select
defaultValue={options2.find((y) => y.value == x.roomType)}
name="roomType"
placeholder="Room Type"
isSearchable
value={options.value}
options={options2}
onChange={(option) =>
handleRoomChangeType(option, i, "roomType")
}
/>
</Grid>
<Grid item lg={2} sm={12} xs={12}>
<Select
defaultValue={BoardBasic.find(
(y) => y.value === x.boardBasic
)}
name="boardBasic"
placeholder="Board Basic"
value={options.value}
onChange={(option) =>
handleRoomChangeBoard(option, i, "boardBasic")
}
options={BoardBasic}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
defaultValue={options.find((y) => y.value == x.adult)}
name="adult"
placeholder="Adult"
value={options.value}
onChange={(option) =>
handleRoomChangeAdult(option, i, "adult")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
defaultValue={options.find((y) => y.value == x.child)}
name="child"
placeholder="Child"
value={options.value}
onChange={(option) =>
handleRoomChangeChild(option, i, "child")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
{roomInputs.length !== 1 && (
<DeleteIcon
onClick={() => handleRemoveClickRoom(i)}
style={{
marginRight: "10px",
marginTop: "4px",
cursor: "pointer"
}}
/>
)}
{roomInputs.length - 1 === i && (
<AddCircleOutlineIcon
onClick={handleAddClickRoom}
style={{ marginTop: "4px", cursor: "pointer" }}
/>
)}
</Grid>
</Grid>
</div>
))}

helperText error in the code added validation also, but it's not working

I tried to fix the issue in various methods and ways, but it's not fixing. I am not able to know why it's getting an error, and I don't understand the exact issue in the code.
The error is:
helperText not defined for select property below is the code & validation
import React,{useState} from "react";
import { connect } from "react-redux";
import { Form, withFormik } from "formik";
import {
Box,
Typography,
FormLabel,
Button,
Grid,
FormHelperText,
Divider,
InputLabel,
MenuItem,
FormControl,
Select,
} from "#material-ui/core";
import { CurrencyTxtField } from "components/core";
import { orders as validationSchema } from "utilities/validationSchemas";
const Orders = ({
errors,
handleChange,
handleBlur,
touched,
isSubmitting,
isValid,
dirty,
values,
}) => {
const [shipping, setShipping] = useState("");
const handleShipping = (event) => {
setShipping(event.target.value);
};
return (
<Form>
<FormLabel color="secondary" component="legend">
<Typography variant="h4" component="h5">
Order Minimum
</Typography>
</FormLabel>
<Box pt={2}>
<Grid container spacing={1}>
<Grid item xs={12}>
<InputLabel>Wholesale Price</InputLabel>
</Grid>
<Grid item xs={12}>
<FormHelperText>
Your's Store Purshase minimum on a customer order.
</FormHelperText>
</Grid>
<Grid item xs={4}>
<CurrencyTxtField
id="order"
name="order"
label=""
variant="outlined"
currencySymbol="$"
outputFormat="number"
digitGroupSeparator=""
textAlign="left"
selectOnFocus="true"
value={values.order}
onChange={handleChange}
autoFocus={true}
onBlur={handleBlur}
error={!!errors.order}
helperText={errors.order ? errors.order : ""}
/>
</Grid>
</Grid>
<Box pt={2}>
<Button
disabled={isSubmitting || !dirty || !isValid}
size="medium"
variant="contained"
color="secondary"
fullWidth={false}
type="submit"
>
Save Changes
</Button>
</Box>
</Box>
<Box pt={3} pb={4}>
<Divider light />
</Box>
<FormLabel color="secondary" component="legend">
<Typography variant="h4" component="h4">
Reorder Minimum
</Typography>
</FormLabel>
<Box pt={2}>
<Grid container spacing={1}>
<Grid item xs={12}>
<InputLabel>Minimum Reorder Amount(optional)</InputLabel>
</Grid>
<Grid item xs={12}>
<FormHelperText>
Your's Store Purshase minimum on any reorders.
</FormHelperText>
</Grid>
<Grid item xs={4}>
<CurrencyTxtField
id="reOrder"
name="reOrder"
label=""
variant="outlined"
currencySymbol="$"
outputFormat="number"
digitGroupSeparator=""
textAlign="left"
selectOnFocus="true"
value={values.reOrder}
onChange={handleChange}
autoFocus={true}
onBlur={handleBlur}
error={!!errors.reOrder && touched.reOrder}
helperText={errors.reOrder ? errors.reOrder : ""}
/>
</Grid>
</Grid>
<Box pt={2}>
<Button
disabled={isSubmitting || !dirty || !isValid}
size="medium"
variant="contained"
color="secondary"
fullWidth={false}
type="submit"
>
Save Changes
</Button>
</Box>
</Box>
<Box pt={3} pb={4}>
<Divider light />
</Box>
<FormLabel color="secondary" component="legend">
<Typography variant="h4" component="h4">
Ship Lead Time
</Typography>
</FormLabel>
<Box pt={2}>
<Grid container spacing={1}>
<Grid item xs={12}>
<FormHelperText>
The standard amount of time between order acceptance and when the
order is shipped.
</FormHelperText>
</Grid>
<Grid item xs={8}>
<FormControl
variant="outlined"
style={{ width: "200px" }}
>
<Select
id="shippingTime"
name= "shippingTime"
label=""
variant="outlined"
value={shipping}
onChange={handleShipping}
onBlur={handleBlur}
error={!!errors.shippingTime}
helperText={errors.shippingTime ? errors.shippingTime : ""}
>
<MenuItem value={0}>
<em>None</em>
</MenuItem>
<MenuItem value={1}>1-3 Days</MenuItem>
<MenuItem value={2}>4-7 Days</MenuItem>
<MenuItem value={3}>7-14 Days</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
<Box pt={2}>
<Button
disabled={isSubmitting || !dirty || !isValid}
size="medium"
variant="contained"
color="secondary"
fullWidth={false}
type="submit"
>
Save Changes
</Button>
</Box>
</Box>
</Form>
);
};
const mapStateToProps = (state) => ({});
const mapActionsToProps = {};
const formikOptions = {
enableReinitialize: true,
mapPropsToValues: (props) => ({
order: "",
reOrder: "",
}),
validationSchema,
validateOnChange: true,
handleSubmit: () => {},
};
export default connect(
mapStateToProps,
mapActionsToProps,
)(withFormik(formikOptions)(Orders));
export const orders = Yup.object().shape({
order: Yup.number().required("Minimum order price is required."),
reorder: Yup.number().required("Minimum reorder price is required."),
shippingTime:Yup.string().required("Standard shipping-time is required"),
});
CurrencyTXT
import React from "react";
import PropTypes from "prop-types";
import { Box, InputLabel, FormHelperText } from "#material-ui/core";
import CurrencyTextField from "#unicef/material-ui-currency-textfield";
const CurrencyTxtField = ({
defaultValue,
disabled,
error,
helperText,
id,
label,
labelHidden,
name,
onChange,
onBlur,
persistHelperText,
required,
value,
digitGroupSeparator,
variant,
currencySymbol,
outputFormat,
textAlign,
}) => {
return (
<Box pt={1.5}>
{labelHidden
? <Box component="label" display="none">{label}</Box>
: <InputLabel htmlFor={id} required={required} disabled={disabled}>{label}</InputLabel>
}
<CurrencyTextField
label=""
variant={variant}
value={value}
currencySymbol={currencySymbol}
outputFormat={outputFormat}
digitGroupSeparator={digitGroupSeparator}
textAlign={textAlign}
onChange={onChange}
onBlur={onBlur}
defaultValue={defaultValue}
disabled={disabled}
required={required}
name={name}
id={id}
error={error}
/>
<FormHelperText error={error} disabled={disabled}>{(error || persistHelperText) && helperText}</FormHelperText>
</Box>
);
};
CurrencyTxtField.defaultProps = {
disabled: false,
error: false,
labelHidden: false,
type: "text",
persistHelperText: false,
currencySymbol: "$",
outputFormat: "number",
digitGroupSeparator: "",
variant: "outlined",
};
CurrencyTxtField.propTypes = {
autoFocus: PropTypes.bool,
inputComponent: PropTypes.func,
defaultValue: PropTypes.node,
disabled: PropTypes.bool,
error: PropTypes.bool,
helperText: PropTypes.string,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
labelHidden: PropTypes.bool,
name: PropTypes.string,
onBlur: PropTypes.func,
onChange: PropTypes.func,
persistHelperText: PropTypes.bool,
required: PropTypes.bool,
type: PropTypes.string,
value: PropTypes.node,
};
export default CurrencyTxtField;

We Keep Coding

JavaScript is the programming language of the Web.

I want to make mui textfield with array - javascript

Related

How to create new components on every button click in "React"

How to hide a Material UI grid item?

(MUI 5) styled Componants throwing error in browser theme.palette[ownerState.color] is undefined

React Edit values are not bind in dynamic input select

helperText error in the code added validation also, but it's not working

Categories

Resources