We Keep Coding

onChange function is not enabling to enter more values in Material UI Text Field

I have a custom TextField component in my app but I am not able to increase the value of first TextField since it has onChange method whereas the second TextField doesn't have onChange method hence I am able to increase it's value.
import React, { useContext, useRef, useCallback, useState } from "react";
import {
Card,
CardContent,
CardActions,
TextField,
Button,
CardHeader,
Select,
MenuItem,
InputAdornment,
} from "#mui/material";
import CircularProgress from "#mui/material/CircularProgress";
import { alpha, styled } from "#mui/material/styles";
import UserContext from "../../context";
import polygonLogo from "../../assets/polygon-matic-token-icon.png";
import usdcTokenLogo from "../../assets/usdc-token-icon.png";
import "./index.css";
function UniSwapWidget() {
const [inputToken, setInputToken] = useState("Matic");
const [outputToken, setOutputToken] = useState("USDC");
const [inputTokenValue, setInputTokenValue] = useState("0.0");
const [outputTokenValue, setOutputTokenValue] = useState(0.0);
const [fetchPriceWaiter, setFetchPriceWaiter] = useState(false);
const { signerAddress, logIn, loginWaiter } = useContext(UserContext);
const UNI = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";
const connectors = useRef(null);
const focusConnectors = useCallback(() => connectors.current?.focus(), []);
const CustomCard = styled(Card)(({ theme }) => ({
borderRadius: "24px",
padding: "8px",
boxShadow:
"rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px, rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px",
}));
const CustomCardContent = styled(CardContent)(({ theme }) => ({
display: "flex",
flexDirection: "column",
gap: "0.3rem",
}));
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: "rgb(253, 234, 241)",
color: "rgb(213, 0, 102)",
width: "100%",
boxShadow: "none",
fontWeight: 500,
padding: "16px",
borderRadius: 20,
"&:hover": {
backgroundColor: "rgb(252, 220, 232)",
boxShadow: "none",
},
}));
const CustomSelect = styled(Select)(({ theme }) => ({
borderRadius: "16px",
height: "fit-content",
backgroundColor: "rgb(237, 238, 242)",
borderColor: "white",
"#demo-simple-select": {
display: "flex",
alignItems: "center",
gap: "0.3rem",
fontSize: "18px",
fontWeight: 500,
},
"&:hover": {
backgroundColor: "rgb(232, 0, 111)",
},
}));
const onHandleInputTokenValueChange = (e)=>{
e.preventDefault();
setInputTokenValue(e.target.value);
// setFetchPriceWaiter(true);
}
return (
<div className="uniswap">
<CustomCard sx={{ minWidth: 275 }}>
<CardHeader
title={
<span>
<b>Swap</b>
</span>
}
/>
<CustomCardContent>
<div className="input-token-div">
<TextField
id="outlined-basic"
placeholder="0.0"
// label={inputTokenValue === "" ? "0.0" : ""}
onChange={onHandleInputTokenValueChange}
// value={inputTokenValue}
fullWidth
required
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={inputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
}}
onChange={(e) => {
setInputToken(e.target.value);
setOutputToken(
e.target.value === "Matic" ? "USDC" : "Matic"
);
}}
>
<MenuItem
value={"Matic"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
<div className="output-token-div">
<TextField
placeholder="0.0"
id="outlined-basic"
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={outputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
backgroundColor: "rgb(232, 0, 111)",
color: "white",
}}
onChange={() => console.log("chaning")}
>
<MenuItem
value={"Matic"}
disabled={inputToken === "Matic" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
disabled={inputToken === "USDC" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
{fetchPriceWaiter ? (
<div className="price-div">
<CircularProgress sx={{ margin:0 }} size={25} />
Fetching Best Price...
</div>
) : null}
</CustomCardContent>
<CardActions>
{signerAddress !== "" ? (
<CustomButton variant="contained">
Swap
</CustomButton>
) : (
<CustomButton
variant="contained"
disabled={loginWaiter}
onClick={logIn}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{loginWaiter ? (
<CircularProgress sx={{ marginRight: 1 }} size={25} />
) : null}
Connect Wallet
</CustomButton>
)}
</CardActions>
</CustomCard>
</div>
);
}
export default UniSwapWidget;
I don't know why it's happening. I am using Material UI 5.10.3. May anyone knows what's wrong here?

Solution
Finally I have found the solution. Need to pass onChange function to InputProps. Reference: Mask Textfield component in Material-UI

How can I assign value to a variable inside a UI component in React?

I am relatively new to React and Javascript. I am trying to declare a temporary variable and assign the value companyData.name to it as I need to collect the 2 variables like companyData.name.
This is my code.
<Box sx={{ flexGrow: 3 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={2.5}>
<Grid container spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 16 }} display="flex"
justifyContent="center"
alignItems="center" >
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 1:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>
</Box>
</Grid>
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 2:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
{chartData ? <CompanyChart dataset={chartData} companyName={companyData.name} companyName2={companyData.name}/>:<div> Loading chart...</div>}
I need to assign companyData.name of Company 1 to companyName in the above line.
I have tried using React.useState for this purpose. But I am unable to set the state inside a UI component.
const [company1,setCompany1]=React.useState([]);
setCompany1(companyData.name)
Any help regarding how to proceed would be appreciated. I just need to pass the names of 2 companies to .

You are using an array as default state ([]) and then trying to pass a string as a value setCompany(companyData.name).
Try this:
const [company1,setCompany1]=React.useState('');
setCompany1(companyData.name)

Different Appbars in two different lines - width

I'm in my first project with Material UI and React and there's a problem I've encountered in terms of design, I want to make sure that each AppBar is in a separate row, and stays the same size as in the image.
Note that I've already tried changing the container direction to columns'/rows, then it does each in a separate row but each AppBar takes up all the screen width and if I try to change the width to a certain percentage of the screen it loses proportion.
I would appreciate your assistance!
I'm attaching a picture of what my current situation is (I just want to put the slider under the Buttons AppBar )
this is the problem
return (
<main className={classes.content}>
{/* <div className={classes.toolbar} /> */}
<Grid container spacing={2} justify='center'>
<Grid item>
<AppBar
position='static'
sx={{
backgroundColor: '#212121 !important ',
borderRadius: 8,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
// width: "min",
// margin: "auto",
}}
style={{
border: 'solid white 0.1px',
}}
>
<Toolbar>
<Button
className={classes.btn}
sx={{
m: 2,
textTransform: 'capitalize',
}}
variant='outlined'
size='small'
//onClick={handleCategoryClicked}
>
filter by category
</Button>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'price')}
>
filter by price
</Button>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'rating')}
>
filter by rating
</Button>
</Toolbar>
</AppBar>
</Grid>
<Grid>
<AppBar
position='static'
sx={{
backgroundColor: '#212121 !important ',
borderRadius: 8,
}}
style={{ border: 'solid white 0.1px' }}
>
<Box sx={{ width: 300 }}>
<Slider
getAriaLabel={() => 'Temperature range'}
value={value}
onChange={handleChange}
valueLabelDisplay='auto'
getAriaValueText={valuetext}
/>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'pricerange')}
>
filter by Price Range
</Button>
</Box>
</AppBar>
</Grid>

Whenever invite button is clicked new form should be added everytime and when delete button clicked form gets deleted can anyone help me in this?

Invite.js
this is my invite component in which invite button is outside of the form and delete button is inside of form.I want if delete button is click form should be deleted In this I've used use state and I've have taken this form from material-ui help me if any one can how I can solve my problem ?
import * as React from "react";
import Box from "#mui/material/Box";
import FormControl from "#mui/material/FormControl";
import TextField from "#mui/material/TextField";
import AccountCircle from "#mui/icons-material/AccountCircle";
import Button from "#mui/material/Button";
import DeleteIcon from "#mui/icons-material/Delete";
import AddIcon from "#mui/icons-material/Add";
import Stack from "#mui/material/Stack";
const Invites = () => {
const [ addForm,setAddForm]=React.useState(false)
const [deleteForm, setdeleteForm]=React.useState(false)
const setAddFormHandler = () => {
console.log("clicked");
setAddForm(true);
};
const deleteHandler=()=>{
setdeleteForm(true)
}
return (
<>
<Stack direction="row" spacing={2}>
<Button
variant="contained"
color="info"
startIcon={<AddIcon />}
onClick={setAddFormHandler}
>
ADD INVITE
</Button>
</Stack>
{addForm ?<Box sx={{ "& > :not(style)": { m: 1 } }}>
<FormControl>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Stack
direction="row"
spacing={4}
style={{ marginLeft: 30, marginTop: 18, width: 500 }}
>
<Button variant="contained" size="large" startIcon={<DeleteIcon />} onClick=
{deleteHandler}>
Delete
</Button>
</Stack>
</FormControl>
</Box>:null}
</>
);
};
export default Invites;

First of all your question is confusing. So i'm adding two solutions here which addresses two perspectives of the problem, you can choose the one matching yours.
Sol 1: You want to create new form for each click on invite button (multiple forms)
The below solution will add new forms to the same page every time the invite button is clicked and delete the respective form once the delete button is clicked.
import * as React from "react";
import Box from "#mui/material/Box";
import FormControl from "#mui/material/FormControl";
import TextField from "#mui/material/TextField";
import AccountCircle from "#mui/icons-material/AccountCircle";
import Button from "#mui/material/Button";
import DeleteIcon from "#mui/icons-material/Delete";
import AddIcon from "#mui/icons-material/Add";
import Stack from "#mui/material/Stack";
const Invites = () => {
const [forms, setForm] = React.useState({ val: []});
function createcustomForms() {
return forms.val.map((el, i) =>
<div key={i}>
<Box sx={{ "& > :not(style)": { m: 1 } }}>
<FormControl>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Stack
direction="row"
spacing={4}
style={{ marginLeft: 30, marginTop: 18, width: 500 }}
>
<Button variant="contained" size="large" startIcon={<DeleteIcon />}
onClick={(e) => removeForm(i)}>
Delete
</Button>
</Stack>
</FormControl>
</Box>
</div>
);
}
const addForm = () => {
setForm({ val: [...forms.val, '']})
}
const removeForm = (i) => {
let vals = [...forms.val];
vals.splice(i,1);
setForm({ val: vals });
}
return (
<>
<Stack direction="row" spacing={2}>
<Button
variant="contained"
color="info"
startIcon={<AddIcon />}
onClick={addForm}
>
ADD INVITE
</Button>
</Stack>
{createcustomForms()}
</>
);
};
export default Invites;
Sol 2 : You want to create a form when invite button is clicked and delete it when delete button is clicked (currently in your code delete is not working)
const deleteHandler=()=>{
setdeleteForm(true)
}
should be changed to
const deleteHandler=()=>{
setAddForm(false);
}

React native blocking the top part of the button makers un clickable

The upload Button on cover the top part not clickable
this is the design
The Button with upload cover is a problem I think the cover is blocking the button because it happen to on other screen but I just use zIndex and it works fine. I try even position "absolute" and nothing happen. renderBg is just a function that display the current profile cover of the user
enter code here
<Container>
<Content style={{ zIndex: 1, backgroundColor: Colors.grey }}>
{
renderBG()
}
<View style={{ height: height * 0.2 }}>
<Header>
<TouchableOpacity
style={{ alignItems: 'center', flex: 1 }}
onPress={() => setPrivacy()}
>
<View>
<Icon
type="Ionicons"
name={account_details && account_details.isPrivate ? 'ios-eye-off' : 'ios-eye'}
size={28}
style={{
color: account_details && account_details.isPrivate ? '#d5d5d5' : Colors.green,
elevation: 5,
borderRadius: 20,
}}
/>
</View>
</TouchableOpacity>
<View style={{ flex: 5, alignItems: 'center' }}>
<Text style={{ color: '#d5d5d5', marginLeft: -60 }}>
{getTitle()}
</Text>
</View>
{/* {
profiles.length > 1
? (
<Button
small
icon
color={Colors.red}
style={{ alignItems: 'center', flex: 1 }}
onPress={() => setConfirmDelete(true)}
>
<Icon
name="ios-trash"
size={28}
style={{ color: '#d5d5d5' }}
/>
</Button>
)
: <View style={{ flex: 1 }} />
} */}
</Header>
</View>
<View
style={{
backgroundColor: '#fff',
height: verticalScale(156),
width,
alignItems: 'center',
zIndex: 4,
}}
>
<View style={{
zIndex: 4,
marginTop: -verticalScale(20),
marginLeft: width * 0.64,
flexDirection: 'row',
justifyContent: 'flex-end',
}}
>
<Button small icon withShadow onPress={uploadCover}>
<FeatherIcon name="upload" />
</Button>
</View>
<View>
{
avatarDisplay()
}
<View style={{
zIndex: 4,
// marginTop: -verticalScale(72),
marginTop: -verticalScale(42),
flexDirection: 'column',
left: 50,
}}
>
<Button small icon withShadow onPress={uploadAvatar}>
<FeatherIcon name="upload" />
</Button>
{
// account_details.field_avatar === undefined
// && account_details.field_avatar === ''
// ? <View style={{ height: 34 }} />
// : (
// <Button small icon color={Colors.red} withShadow onPress={removeAvatar}>
// <Icon type="FontAwesome" name="trash" />
// </Button>
// )
}
</View>
</View>