We Keep Coding

React DnD, could not find "store" in the context of Connect(Droppable)

Hello I am trying to make a drag and drop in my application but I have got a huge error. I have no idea if property is missing because in IDE it is an error free code.
Uncaught Error: Could not find "store" in the context of "Connect(Droppable)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Droppable) in connect options.
Down here are my components
3 Columns ( I want drag and drop across one column each, not between them)
const DetailColumns: React.FC<funcProps> = (props) => {
const onDragEnd = () => {};
return (
<Box
h="80vh"
borderWidth="0.5rem"
borderColor="orange.300"
borderRadius="1rem"
w="80%"
marginTop="2rem"
>
<Grid w="100%" h="100%" templateColumns="60% 20% 20%">
<Box border="0.5rem" borderColor="orange.300">
<RecipeDescriptionBox recipe={props.recipe} />
</Box>
<Box borderLeftWidth="0.5rem" borderColor="orange.300">
<RecipeStepsBox recipe={props.recipe} />
</Box>
<DragDropContext onDragEnd={onDragEnd}>
<Box borderLeftWidth="0.5rem" borderColor="orange.300">
<RecipeIngredientsBox recipe={props.recipe} />
</Box>
</DragDropContext>
</Grid>
</Box>
);
};
List of Items
<Box>
<ColumnHeader title="Steps" />
<Droppable droppableId="unique">
{(provided) => (
<Box {...provided.droppableProps} innerRef={provided.innerRef}>
{steps.map((step, index) => (
<DetailListItem
key={step}
itemName={step}
indexOfItem={index}
id={Math.random().toString()}
/>
))}
{provided.placeholder}
</Box>
)}
</Droppable>
</Box>
Item element
<Draggable draggableId={props.id} index={props.indexOfItem}>
{(provided) => (
<Box
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
>
<Flex margin="1rem">
<Box
bgGradient="linear(to-r, orange.200, orange.400)"
height="6vh"
width="6vh"
boxShadow="md"
rounded="md"
>
<Grid w="100%" h="100%" placeItems="center">
<Text color="white" fontWeight="700" fontSize="140%">
{props.amount && props.amount + props.unit}
{!props.amount && props.indexOfItem}
</Text>
</Grid>
</Box>
<Grid placeItems="center">
<Text marginLeft="1rem" fontWeight="500" fontSize="1.8rem">
{props.itemName}
</Text>
</Grid>
</Flex>
</Box>
)}
</Draggable>
If you want I can put this code to some sandbox to make it easier to debug.

When to use Grid item vs when not to use Grid Item to align and justify

I am curious about when I should use Grid item in order to take advantage of the Grid container props such as justify or alignItems. I was under the impression that these attributes can be only applied to the Grid item inside the Grid container. However, it does not seem so from my example (see: "option two).
For example, let's consider this simple scenario: I want a way to display three Typography text, one next the other with some space in between.
Option one:
https://codesandbox.io/s/naughty-tharp-0tof1
export default function App() {
return (
<Grid
container
direction="row"
justify="space-between"
style={{ minHeight: "100px", backgroundColor: "yellow" }}
>
<Grid item>
<Typography> First text </Typography>
</Grid>
<Grid item>
<Typography> Second text </Typography>
</Grid>
<Grid item>
<Typography> Third text </Typography>
</Grid>
</Grid>
);
}
Option two:
https://codesandbox.io/s/romantic-northcutt-kjbef
export default function App() {
return (
<Grid
container
direction="column"
justify="space-between"
style={{ minHeight: "100px", backgroundColor: "yellow" }}
>
<Typography> First text </Typography>
<Typography> Second text </Typography>
<Typography> Third text </Typography>
</Grid>
);
}
Why does justify and direction works directly on Typography as in option two? Should not they only work on Grid item?

Ciao, the Grid css will be applied to all Grid's children (independently if children are Grid item or Typography).
To explain better what I'm saying lets inspect your codesandbox examples:
Option one:
Option two:
In both cases, the div father (MuiGrid-root) will apllies his style to children.

Material UI Autocomplete with Avatar in textfield

Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField

You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project

How to Align One Item Left, and Another Right using Material UI Grid Components

I'm having a very difficult time trying to achieve something simple with the Grid Component from MaterialUI. Specifically, I'd like to align one item to the left, and another to the right on one layout row.
I've searched extensively, and have not found any solutions that work. I've tried many suggestions, including the use of justifyContent and alignContent within a Grid component, and within JSS, and the flex: 1 technique of 'pushing' content.
Relevant Code Snippets
Trying to put the <Typography> element on the left, and the <FormGroup> on the right:
<Container>
<Grid container spacing={3}>
<Grid className={classes.rowLayout}>
// Goal is to align this to the LEFT
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
// Goal is to align this to the RIGHT
<Grid item xs={3}>
<FormGroup>
// Simple `Switch` button goes here
</FormGroup>
</Grid>
</Grid>
</Grid>
</Container>
MaterialUI JSS styling:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%'
},
rowLayout: {
display: 'flex',
alignItems: 'baseline'
},
}));
I'm also finding that, generally speaking, this is requiring the use of many Grid components, and I'd love to write cleaner code if possible.
Do you have any tips or fixes to this problem?
Thanks a million,
Davis

I'm using this at the moment and it works well to align one to the far left, and one to the far right.
Inspired from: How to align flexbox columns left and right?
const useStyles = makeStyles((theme) => ({
right: {
marginLeft: 'auto'
}
}));
<Grid container alignItems="center">
<Grid>
<Typography variant="h4" component="h4">Left</Typography>
</Grid>
<Grid className={classes.right}>
<Button variant="contained" color="primary">Right</Button>
</Grid>
</Grid>

I used a different approach to list one grid item to right. Similar approach can be use to show grid items to right and one at left.
<Grid container>
<Grid item>Left</Grid>
<Grid item xs>
<Grid container direction="row-reverse">
<Grid item>Right</Grid>
</Grid>
</Grid>
</Grid>

I think the best option here is to use flex like this:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%'
},
rowLayout: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center' // To be vertically aligned
},
}));
As a second choice (and for me the best since you are using Material UI at its fullest expression which if you are using it, it's the best thing to do. Use the library as much as you can) you could do something like this:
<Container>
<Grid container spacing={3}>
<Grid container direction="row" justify="space-between" alignItems="center">
// Goal is to align this to the LEFT
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
// Goal is to align this to the RIGHT
<Grid item xs={3}>
<FormGroup>
// Simple `Switch` button goes here
</FormGroup>
</Grid>
</Grid>
</Grid>
</Container>

I have solved a similar issue using justifyContent on each of the Grid items.
<Container>
<Grid container spacing={3} alignItems="baseline">
<Grid item xs={6} sx={{
justifyContent: "flex-start"
}}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
<Grid item xs={3} sx={{
display: "flex",
justifyContent: "flex-end"
}}>
<FormGroup>
<Typography variant="h6" gutterBottom>Some Switch</Typography>
</FormGroup>
</Grid>
</Grid>
</Container>
This page gives you a really good visually interpretation of how flex works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Align Grid nicely

I'm breaking my head over this. I'm using a Grid container, which contains two grids. One with a textfield , and one with a Checkbox . The grids refuses to align correctly.
<Grid container>
<Grid item sm={2}>
<TextField
id="filter"
label={labels.filterHelperText}
value={this.props.brokersListFilter}
onChange={this.onFilterChange}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FilterListIcon />
</InputAdornment>
)
}}
/>
</Grid>
<Grid item sm={1}>
<FormControlLabel
className={this.props.classes.checkbox}
control={
<Checkbox
checked={this.props.activeAgentsOnly}
onChange={this.props.setActiveAgentsOnly}
color="primary"
/>
}
label={labels.isActive}
/>
</Grid>
</Grid>
With this code, the spacing are too large... If I change the first inner grid to sm={1} , then both grid overlap each other(how is it even possible if they're on different grids ?) I need to somehow make the gap between those two grids smaller .. How can I do that?
Over lapping:
Not over lapping:

Please update grid items like
<Grid item sm={2}>
to
<Grid item sm={6}>
<Grid item sm={6}>
Should equal 12. 8+4 or 6+6 or so on.....