I'm new to framework, the no.of contents are getting overloaded. the problem is when we have multiple users then their name need to be displayed according to the content of the message, for that we need to give mapping at first, but the data is getting overloaded.
Can anyone help me in this query?
Here is the code:
<div>
{this.state.data.map(item => {
return (
<Card>
<CardHeader
avatar={<div>Sanjana (or) someone else</div>}
title={
<>
<InputBase
placeholder="Search Google Maps"
margin="normal"
/>
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent className={classes.contentHeight} id="chatList">
<div>
<Message isSender content={item.message} />
<Message content={item.message} />
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
);
})}
</div>
Can anyone help me in this? thanks in advance!
I think you may want to only map the data messages, not the chat container(s)
render() {
const { classes } = this.props;
return (
<div>
<Card>
<CardHeader
avatar={<div>Sanjana (or) someone else</div>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent className={classes.contentHeight} id="chatList">
{this.state.data.map(item => {
return (
<div>
<Message isSender content={item.message} />
<Message content={item.message} />
</div>
);
})}
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
</div>
);
}
Related
First I am trying to post my form data without an image then that data is passed to the backend successfully. then I try to send an image to the backend with form data and then I got an error. image uploading field is a not required field. how I pass the image to the backend with form data.
This is my basic info tab image uploading field
<Grid item xs={6} md={3} sm={4}>
<Controller
name="avatar"
id="avatar"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-4 mb-8"
type="file"
onChange={(event) => {
// console.log(event.target.files[0]);
setSelectedImage(event.target.files[0]);
}}
autoFocus
value={selectedImage}
variant="outlined"
size="small"
fullWidth
/>
)}
/>
</Grid>
this is my user.js file return
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<Root
header={<UserHeader />}
contentToolbar={
<Tabs
value={tabValue}
onChange={handleTabChange}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
classes={{ root: 'w-full h-64' }}
>
<Tab className="h-64" label="Basic Info" />
// <Tab className="h-64" label="User Images" />
</Tabs>
}
content={
<div className="p-16 sm:p-16 max-w-2xl">
<div className={tabValue !== 0 ? 'hidden' : ''}>
<BasicInfoTab />
</div>
<div className={tabValue !== 1 ? 'hidden' : ''}>
<ImagesTab />
</div>
{/* <div>
<input type="file" name="file_upload" onChange={onFileChage}/>
</div>
<div>
<button>Submit Data</button>
</div>*/}
</div>
}
innerScroll
/>
</form>
</FormProvider>
);
}
This is my error
Now my div participants is scroll down of component, and i want to scroll my div participants from right side like this, do you guys has any ideal? Thank you so much, have good day
{detailConversation?.profileIds.length} participants
{open ? <ArrowDropDownIcon /> : <ArrowDropUpIcon />}
</span>
{!!open && (
<div className={clsx(classes.partic)}>
<TextInput
label="Search"
variant="outlined"
size="small"
fullWidth
value=""
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
),
}}
/>
<span className={classes.member}>
<LinkIcon className={classes.btnIcon} />
<span>Invite via link</span>
</span>
{detailConversation?.profileIds?.map((id: number) => (
<Participants
avatar={profiles[id]?.avatar}
name={profiles[id]?.name}
authorization={profiles[id]?.authorization}
/>
))}
</div>
)}
I am using React-admin to make an application to manage articles and have many people logged in to write articles
I want to pass the USER_ID who is logged in to React-admin to CREATED_BY of API backend when posting a Article
Here is the code example for the add a Post function
export const PostCreate = (props) => {
return (
<Create {...props}>
<PostForm></PostForm>
</Create>)
};
const PostForm = (props ) => (
<FormWithRedirect
{...props}
render={(formProps) => (
// here starts the custom form layout
<form>
<Box p="1em">
<Box display="flex">
<Box flex={2} mr="1em">
<Typography variant="h6" gutterBottom>
Offer
</Typography>
<Box display="flex">
<TextInput source="title" fullWidth />
</Box>
<TextInput source="slug" fullWidth />
<ImageInput
source="pictures"
label="Related pictures"
accept="image/*"
fullWidth
>
<ImageField source="image" title="title" />
</ImageInput>
<TextInput multiline source="description" fullWidth />
<MarkdownInput source="content" fullWidth></MarkdownInput>
<Box mt="1em" />
<Typography variant="h6" gutterBottom>
Address
</Typography>
<Box display="flex">
<Box flex={1} mr="0.5em">
<BooleanInput label="Featured" source="featured" />
</Box>
<Box flex={1} mr="0.5em">
<BooleanInput label="Publish" source="published" />
</Box>
</Box>
</Box>
</Box>
</Box>
<Toolbar>
<Box display="flex" justifyContent="space-between" width="100%">
<SaveButton
saving={formProps.saving}
handleSubmitWithRedirect={formProps.handleSubmitWithRedirect}
redirect={
redirectEdit ? redirectEdit : `/posts/${formProps.record.id}`
}
/>
<DeleteButton
record={formProps.record}
redirect={`/posts/`}
/>
</Box>
</Toolbar>
</form>
)}
/>
)
I tried to get UserId from useGetIdentity
import { useGetIdentity } from "react-admin";
but don't know how to pass the value in
export const PostCreate = (props) => {
const { identity } = useGetIdentity();
return (
<Create {...props}>
<PostForm defaultValue={{ user_id: identity }}></PostForm>
</Create>)
};
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>
);
};```
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>
If you are working with dates and passing them down as {item.date}
then instead use {item.date.toLocaleDateString()} or {item.date.toString()}
{item.date.toLocaleDateString()} or {item.date.toString()} - This worked for me
<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.toString()}{" "}
{contact.LastNameMother.toString()}{" "}
{contact.FirstName.toString()} -{" "}
{contact.OfficialNumber.toString()}
</MenuItem>
);
})}
Just add toString()
I'm new to material UI, i was going through few of the links and then i could built the content of the message.
Here is the Code:
class Data extends React.Component {
render() {
const { classes } = this.props;
return (
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
// <TextField placeholder="Search" margin="normal" />
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent className={classes.contentHeight} >
<Message isSender content="Hello" />
<Message content="Hello back" />
<Message isSender content="Anyone there" />
<Message content="Yes" />
<Message isSender content="Thank you for replying" />
</CardContent>
</Card>
);
}
}
Can anyone help me in this? Thanks in advance
You can add a div to bottom of your Card content component and scroll to it whenever your component is updated.Check here CodeSandBox
<div
style={{ float: "left", clear: "both" }}
ref={el => {
this.messagesEnd = el;
}}
/>
componentDidMount() {
this.scrollToBottom();
}
scrollToBottom = () => {
this.messagesEnd.scrollIntoView({ behavior: "smooth" });
};
componentDidUpdate() {
this.scrollToBottom();
}