Develop Reference

Unable to pass down useState props for adding count

I have three components im trying to connect together to add the number of items I have in a shopping cart. I have the main component which creates the CartCount object and setCartCount functionality:
function MinerStore() {
const [cartCount, setCartCount] = useState([0]);
const addToCart = () => {
setCartCount(cartCount + 1);
};
return (
<>
<div >
<StoreNav cartCount={cartCount} />
<div>
<StoreCard addToCart={addToCart} />
</div>
</div>
</>
);
}
I also then have the two components I am trying to show the added count on as well as the added count functionality:
export default function StoreCard(addToCart) {
return (
<ThemeProvider theme={theme}>
<main>
<Container>
<Grid container spacing={3}>
{data.map((data) => (
<Grid item key={data.id} xs={12} sm={6} md={3}>
<Card>
<CardContent>
</CardContent>
<CardActions>
<div>
<Button onClick={addToCart}>
Add to Cart
</Button>
</div>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
</main>
</ThemeProvider>
);
}
export default function StoreNav(cartCount) {
return (
<AppBar position="static">
<Toolbar>
<IconButton>
<Badge badgeContent={cartCount} color="primary">
<ShoppingCartIcon />
</Badge>
</IconButton>
</Toolbar>
</AppBar>
);
}

You've set your initial state as an array [0].
Set it as as 0 and check it out
And ofc as the people above mentioned you should either use props or {addToCart} in the child's parameter.
Then on button should look as such:
<Button onClick={addToCart /* or props.addToCart */}>Add to Cart </Button>

I have a component. But the onClick function isn't running

I have a component which i have imported into another component. When I click the component, the onclick function refuses to run.
This is the code for the component
const HomeFeedCard = ({ name, image, published, quantity, weight }) => {
const classes = useHomeFeedCardStyles()
return (
<Grid item xs={6} md={3} sm={4} lg={3}>
<Paper elevation={5}>
<img src={image?.url} alt='Product' className={classes.image} />
<div className={classes.container}>
<Avatar
alt='image'
src='https//user.png'
sx={{ width: 56, height: 56, mr: 1 }}
/>
<div className={classes.textContainer}>
<Typography variant='h6' component='body'>
<LinesEllipsis text={` ${name}`} />
</Typography>
<Typography>{`${quantity} left | ${weight}KG`}</Typography>
</div>
</div>
</Paper>
</Grid>
)
}
THIS IS THE function that runs the onClick function. The console returns nothing
<HomeFeedCard
key={product._id}
name={product.productName}
published={product.published}
image={product.images[0]}
quantity={product.quantity}
weight={product.weight}
onClick={() => console.log('product', product.productName)}
/>

Your onClick is not defined in your function HomeFeedCard.
const HomeFeedCard = ({ name, image, published, quantity, weight, onClick }) => {
return (
<div onClick={onClick} />
)
}
If you don't know which properties you want to set use: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

In the HomeFeedCard, you are not expecting an onClick function as a prop.
You need to explicitly bind the onClick to an actual element. You can wrap content inside HomeFeedCardwith adiv`.
OR, pass onClick further to Grid if accepts a click handler.
const HomeFeedCard = ({
name,
image,
published,
quantity,
weight,
onClick
}) => {
const classes = useHomeFeedCardStyles();
return (
<div onClick={onClick}>
<Grid item xs={6} md={3} sm={4} lg={3}>
<Paper elevation={5}>
<img src={image?.url} alt="Product" className={classes.image} />
<div className={classes.container}>
<Avatar
alt="image"
src="https//user.png"
sx={{ width: 56, height: 56, mr: 1 }}
/>
<div className={classes.textContainer}>
<Typography variant="h6" component="body">
<LinesEllipsis text={` ${name}`} />
</Typography>
<Typography>{`${quantity} left | ${weight}KG`}</Typography>
</div>
</div>
</Paper>
</Grid>
</div>
);
};
<HomeFeedCard
key={product._id}
name={product.productName}
published={product.published}
image={product.images[0]}
quantity={product.quantity}
weight={product.weight}
onClick={() => console.log("product", product.productName)}
/>

Getting unexpected token, expected "," while trying to map an array in React

So, this is what I'm doing inside of the return:
return (
<React.Fragment>
<Styles>
<Container>
<Row className="rows container">
{results.length > 0 && (
{results.map(result => (
<Col className="columns " xs={12} sm={6} md={4} lg={3} >
<img src={result.poster_path} alt="movie poster" />
</Col>
))}
)}
</Row>
</Container>
</Styles>
</React.Fragment>
)
But, it's giving me the error Unexpected token, expected "," . I don't understand, especially because I have used the same syntax in another component and that's not reporting any errors.

Your return statement should look like this
return (
<React.Fragment>
<Styles>
<Container>
<Row className='rows container'>
{results.length > 0 &&
results.map(result => (
<Col className='columns ' xs={12} sm={6} md={4} lg={3}>
<img src={result.poster_path} alt='movie poster' />
</Col>
))}
</Row>
</Container>
</Styles>
</React.Fragment>
)
(I removed the square brackets from around results.map)
Square brackets are used to inform jsx that you are going to execute javascript inside the jsx. You already started that execution on {results.length, if you add another pair of brackets inside the js execution block it will be perceived by js as you creating an object, hence the expected comma error.

How to open a collapse bar by onClick of an icon in another Component?

I have a component MockTable which shows a list of some items in a table along with actions such as view, delete and update. I need to open a collapse bar in another component AddMock by clicking any of these actions in MockTable. These actions are icons. I'm using semantic-ui react and react-Bootstrap.
actions in Mocktable =>
<Icon link name="eye" />
<Icon link name="edit" />
<Icon link name="delete" />
AddMock =>
const AddMock = () => {
return (
<div className="row">
<Accordion style={{ paddingLeft: "32px" }}>
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Add Mock
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container className="mockbody">
<Header as="h3">Hierarchy</Header>
<TabContent />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};
How to implement this scenario?

In the component that possess the actions edit, view & delete, you can declare a state variable isActive and pass it through props to the component AddMock.
Assuming Mocktable.js looks something like following.
MockTable.js:
const MockTable = () => {
const [isActive, setIsActive] = useState(false);
return (
<Icon link name="eye" onClick={()=>setIsActive(!isActive)} /> // this will act as toggle (show & hide)
<Icon link name="edit" onClick={()=>setIsActive(!isActive)} />
<Icon link name="delete" onClick={()=>setIsActive(!isActive)} />
<AddMock isActive={isActive} />
)
}
AddMock.js
const AddMock = ({ isActive }) => {
return (
<div className="row">
<Accordion active={isActive} style={{ paddingLeft: "32px" }}> // passing isActive here to show/hide.
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Add Mock
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container className="mockbody">
<Header as="h3">Hierarchy</Header>
<TabContent />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};

How to control the position of the text in the selector in antd UI？

I am using antd's selector, I want to add a prompt to the left of the selection box to indicate what this selector is used to select. I tried to use the label tag in the select tag, but this will give an error. I also thought about using pseudo-elements, but that didn't work. Do you know how to do it. The effect I want is as follows. The left side of the selection box is the prompt word, and the right side is the selection result of the selector.

There is no build-in way, you need to compose it from other components.
For example: using CheckBox, Dropdown, Menu and layout components like Row and Col
const data = ['Jack', 'Lucy', 'Momo', 'Alex'];
export default function App() {
const [selected, setSelected] = useState('Jack');
const menu = (
<Menu onSelect={({ key }) => setSelected(key)}>
{data.map(item => (
<Menu.Item key={item} value={item}>
{item}
</Menu.Item>
))}
</Menu>
);
return (
<FlexBox>
<FlexBox>
<h3>All Checkboxed</h3>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
<Checkbox>{uniqueValue}</Checkbox>
</Select.Option>
))}
</Select>
</FlexBox>
<FlexBox>
<h3>Side By Side</h3>
<Checkbox disabled>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
{uniqueValue}
</Select.Option>
))}
</Select>
</Checkbox>
</FlexBox>
<FlexBox>
<Card size="small" style={{ width: 120 }}>
<Row type="flex" gutter={10}>
<Col>
<Checkbox disabled />
</Col>
<Col>
<Dropdown overlay={menu} trigger={['click']}>
<Row type="flex" style={{ alignItems: 'center' }} gutter={10}>
<Col>{selected}</Col>
<Col>
<Icon type="down" />
</Col>
</Row>
</Dropdown>
</Col>
</Row>
</Card>
</FlexBox>
</FlexBox>
);
}