I hope you are all good,
I have an object {valueA: "a", valueB: "b", ... } with a lot of fields and rather than writing all setter, you know:
const [valueX, setValueX] = useState(data.valueX?data.valueX:"")
I have been looking for some lazy solution so I find react-hook-form so, here is my code
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
{Object.keys(data).map((key) => (
<Grid item xs={10} sm={6} md={3} lg={2} key={key}>
<TextField
label={t(`docsInfo.${key}`)}
name={key}
defaultValue={data[key]}
variante="outlined"
{...register(key)}
/>
</Grid>
))}
</Grid>
<Grid mt={2}>
<Button
variant="contained"
endIcon={<UpgradeIcon />}
type="submit"
>
Update
</Button>
</Grid>
</form>
the code works fine it generates all the fields and the label with the first language (en) but when I click on the second one (jp) nothing happens (T_T)
I've checked my code to be sure my issue isn't something I am missing but could find anything wrong.
the translation module is in a context in my app refer to this
do you have any idea how I can solve my issue?
thanks...
are you sure that you have created the variables for the translation?
Related
So i'm trying basically to have a input field which completes a link and refers the user to it.
However when I click on the button I get a page to open properly but with a 'undefined' at the end as if the input field was not updated.
Any insight would be appreciated :)
let workerID;
const workerLink = "html link";
const workerSearch = workerLink + workerID
return (
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<h1><DashboardOutlinedIcon /> Job Card</h1>
<Moment className={classes.time}interval={1000} format="HH:mm:ss DD/MM/YYYY" />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<h3><AccessibilityNewRoundedIcon /> NameGet</h3>
<TextField id="standard-basic" label="Name:" variant="outlined" />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<h3>Fetch</h3>
<TextField id="standard-basic" label="ID:" variant="outlined" value={workerID}/>
<Button variant="contained" color="primary" className={classes.formstyle} value={workerID}>Search</Button><SearchRoundedIcon />
</Paper>
</Grid>
</Grid>
</div>
);
You should add a onChange attribute to the input(TextField in MaterialUI) and you are better using state in React instead of variables because if the variable updates again react will not update the UI with respect to the value of variable but it will update in case of state.
import React, {useState} from 'react'
// Your Rest of code
const [workerID, setWorkerID] = useState('')//initial value of workerID is empty string
return(
//Rest of Code
<TextField id="standard-basic" label="ID:" variant="outlined" value={workerID} onChange={event=>setWorkerID(event.target.value)}/>
//Rest of Code
)
I am trying to set the value of TextField when a user clicks on a button.
The error I am getting is:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
I think it has to do with the Button as I have a onclick function for each one. maybe there a better solution?
const [txtValue, setTxtValue] = useState({})
function campaignAmount(value){
// alert(value)
setTxtValue(value);
}
return (
<Grid container>
<Grid item lg={6}>
<ButtonGroup color="primary" aria-label="outlined primary button group">
<Button onclick={campaignAmount(300)}>$300</Button>
<Button onclick={campaignAmount(500)}>$500</Button>
<Button onclick={campaignAmount(1000)}>$1000</Button>
</ButtonGroup>
</Grid>
<Grid item lg={3}>
<TextField
id="campaignAmount"
name="campaignAmount"
margin="none"
fullWidth
value={`${txtValue[0]}`=== "undefined" ? '0' : `${txtValue[0]}`}
variant="outlined"
required={true}
/>
</Grid>
</Grid>
);
Update:
I have made some changes and now I am getting
Line 164:9: 'setTextValue' is not defined no-undef
Search for the keywords to learn more about each error.
New Code
const [txtValue, setTxtValue] = useState("0")
function schemaTypeSelectionHandle(event) {
// console.log('key: ', $(event.target).data('key'));
setTextValue(event.target.attributes.getNamedItem('data-key').value);
console.log('key: ', event.target.attributes.getNamedItem('data-key').value);
}
return (
<Grid container>
<Grid item lg={6}>
<ButtonGroup color="primary" onClick={this.schemaTypeSelectionHandle.bind(this)} aria-label="outlined primary button group">
<Button data-key='1'>$300</Button>
<Button data-key='1'>$500</Button>
<Button data-key='1'>>$1000</Button>
</ButtonGroup>
</Grid>
<Grid item lg={3}>
<TextField
id="campaignAmount"
name="campaignAmount"
margin="none"
fullWidth
value={`${txtValue[0]}`=== "undefined" ? '0' : `${txtValue[0]}`}
variant="outlined"
required={true}
/>
</Grid>
</Grid>
);
The edited code seems to be working fine. But the only issue is the little typo you have. It is "setTxtValue" not "setTextValue".
Your defined hook => const [txtValue, setTxtValue] = useState("0")
I am looking at react-admin demo code trying to learn from it. I have noticed quite a few time the same behavior: demo code is not waiting for a record to load and does not get undefined exceptions. I am struggling to understand why are they not getting the undefined exception. For example: In PosterEdit source code they are just using the component which looks like
const Poster = ({ record }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent className={classes.content}>
<img src={record.image} alt="" className={classes.img} />
</CardContent>
</Card>
);
};
If I use the component in the same way, I get undefined exception
TypeError: can't access property "image", record is undefined
I do not understand the magic from the demo code. Can someone demystify?
I found the answer for this exact example.
My Poster component was placed within several Grid components from material-u. Here is the cleaned code sample to show the structure.
<Edit {...props} aside={<Aside />}>
<TabbedForm }>
<FormTab >
<Grid container fullWidth className={classes.tabContent}>
<Grid item xs={7}>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" gutterBottom className={classes.sectionTitle}/>
<Poster
</Grid>
</Grid>
</Grid>
</Grid>
</FormTab >
..other form tabs..
</TabbedForm }>
</Edit>
If the component is placed directly as FormTab child, then it works. I still do not understand why though. Anyway, I hope it helps someone.
I have designed a simple Admin application with react-admin (v3.5.2) with about 10 tables and API calls. I use the dataprovider for most of the menus, barring a few fetch calls to fetch custom data.
One of the menus displays a list of products and has some standard categories, type, description and another has URL images. The idea is to display products with images.
However I have not been able to resolve this, the requirement to fetch images stored as base64 string on an S3 bucket and display then on the webpage alongside each product.
A simple ImageField does not work since it is unable to convert to base64 image (I think). Moreover this doesn't help much since the imageUrl is actually fetched from a different table with a one to many relation
<ImageField source="imageUrl" title="Image"/>
I also tried to put it in a custom Grid inside SimpleShowLayout, but I am not sure how to get the details from API. Rest of the grid is populated simply from record
const Vehiclepartdet = ({ record }) => (
<span>
<Grid container>
<Grid xs={12} sm={2}>
Make <br /> {record.category}
</Grid>
<Grid xs={12} sm={2}>
Part <br /> {record.desc}
</Grid>
<Grid xs={12} sm={2}>
Image <br /> <img src={"data:image/jpeg;base64," + ImageData} />
</Grid>
</Grid>
</span>
Product
product id
product category
product desc
Product Images
image id
image1 url
image2 url
image3 url
product id
I am quite new to all this - react-admin, reactjs and everything react, just few days old into all this, hope that the question makes sense!
You have to pass your image string to format your Data:URI
const encoded = "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAwFBMVEXm7NK41k3w8fDv7+q01Tyy0zqv0DeqyjOszDWnxjClxC6iwCu11z6y1DvA2WbY4rCAmSXO3JZDTxOiwC3q7tyryzTs7uSqyi6tzTCmxSukwi9aaxkWGga+3FLv8Ozh6MTT36MrMwywyVBziSC01TbT5ZW9z3Xi6Mq2y2Xu8Oioxy7f572qxzvI33Tb6KvR35ilwTmvykiwzzvV36/G2IPw8O++02+btyepyDKvzzifvSmw0TmtzTbw8PAAAADx8fEC59dUAAAA50lEQVQYV13RaXPCIBAG4FiVqlhyX5o23vfVqUq6mvD//1XZJY5T9xPzzLuwgKXKslQvZSG+6UXgCnFePtBE7e/ivXP/nRvUUl7UqNclvO3rpLqofPDAD8xiu2pOntjamqRy/RqZxs81oeVzwpCwfyA8A+8mLKFku9XfI0YnSKXnSYZ7ahSII+AwrqoMmEFKriAeVrqGM4O4Z+ADZIhjg3R6LtMpWuW0ERs5zunKVHdnnnMLNQqaUS0kyKkjE1aE98b8y9x9JYHH8aZXFMKO6JFMEvhucj3Wj0kY2D92HlHbE/9Vk77mD6srRZqmVEAZAAAAAElFTkSuQmCC";
const Vehiclepartdet = ({ record }) => (
<span>
<Grid container>
<Grid xs={12} sm={2}>
Make <br /> {record.category}
</Grid>
<Grid xs={12} sm={2}>
Part <br /> {record.desc}
</Grid>
<Grid xs={12} sm={2}>
Image <br /> <img src={`data:image/png;base64, ${encoded}`} />
</Grid>
</Grid>
</span>
)
I want to set direction property to <Grid container> component of the Material UI framework. I have read the doc
and I tried setting direction property as column like below:
<Grid container direction="column">
<Grid item xs={12} >
<h3 className="center-align">Log In</h3>
<input type="text" id="user-email-on-login" placeholder="username#email.com" />
<input type="password" id="user-password-on-login" placeholder="password" />
<button>Log In</button>
</Grid>
<Grid item xs={12}>
<button>Forgot Id/Password</button>
<button>Create Account</button>
<button>Remember Me</button>
</Grid>
</Grid>
But the output is not expected result. The output seems the same with the way I have used direction="row".
When I remove <Grid item> tag, then direction=column property on <Grid container> works perfectly.
If I have to use <Grid item> tag, is there a way to set flex-direction property as column?
You could add the "container" property to the grid element and thus have the "direction" property.
It's possible for an item to be both container and item at the same time.
Anyway, if you want to be more precise, you can upload an example of sandbox :)
Here's an example of what you want:
https://stackblitz.com/edit/react-2m3blz