Develop Reference

Add popup in every item of flatlist in React

I would like to add a popup form in each item in the Flatlist, and the item is actually a card.
My problem is that every time, I clicked the button, the popup shows but, when my mouse moves out of the card, instead of showing the original one, it shows another popup whose parent is the whole page.
I know the problem should be that I need not set the variable setPopup properly. But I don't know how to fix it.
When my mouse is on the card:
enter image description here
When my mouse is out of the card, the popup will move up and its position will be based on the whole page:
enter image description here
Thank you!
This is my code.
const [buttonPopUp, setButtonPopUp] = useState(undefined);
const renderItem = (item, index) => {
return(
<Card key={index} style={{width: '20rem'}}>
<CardImg className='galleryPics' top src={galleryPic.img} alt="..."/>
<CardBody>
<PopUpEditGallery
gallery={item}
index = {index}
trigger={buttonPopUp}
setTrigger={setButtonPopUp}
>
Edit
</PopUpEditGallery>
<CardTitle className='cardTitle'>{item.title}</CardTitle>
<CardText className='cardText'>{item.description}</CardText>
<Button className="btn-round btn-icon" color="primary" size='sm' onClick={()=> setButtonPopUp(index)}>Edit</Button>
</CardBody>
</Card>
);
}
return (
<div>
<div>
<Header/>
</div>
<div className="container">
<div className="row">
<div className='col-7'>
<ul>
<FlatList
list={values.gallery}
renderItem={renderItem}/>
</ul>
</div>
</div>
</div>
</div>
)
code for popup
return (props.trigger != undefined) ? (
props.trigger == props.index &&
<div className='popup'>
<div className='popupInner'>
<form onSubmit={handleSubmit(onSubmit)}>
<FormGroup>
<Label>Title</Label>
<Input
type="text"
placeholder={prev.title}
onChange={val => props.setTitle(val.target.value, prev.idx)}
/>
</FormGroup>
<Button className="btn-round btn-icon" color="primary" size='sm'>
Submit
</Button>
<Button className="btn-round btn-icon" color="default" size='sm'>
Cancel
</Button>
</form>
</div>
</div>
): "";

Can't change my react icon while expanding my Accordion in Bootstrap

I can't change my react icon while expanding my Accordion in Bootstrap. The 'Click me' content is dropping down and showing correctly but the icon still stucks.
function Expander () {
const[active,setActive] = useState(false);
return (
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle as={Card.Header} eventKey="0">
{active ? <GrAddCircle size='20px'/> : <AiOutlineMinusCircle size='20px'/>}
Click me!
</Accordion.Toggle>
<Accordion.Collapse eventKey="0" onClick={()=>setActive(!active)}>
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="1">
Click me!
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
}
export default Expander;

Seems like the setActive method is never getting called only, which is resulting in active flag to never turn true.
Why are you adding onClick listener on the Accordion.Collapse element, it should be on the Accordion.Toggle element.

How to close drawer component from main page with menu button onclick on main page (React-js)

I'm new in reactjs, I have main page
<div >
<AppBar position="flex" style={{backgroundColor:'#1A437E'}}>
<Toolbar>
<IconButton edge="end" color="inherit" aria-label="menu">
<img alt="open menu" height="57" width="50" border="0" src={ico7} />
</IconButton>
</Toolbar>
</AppBar>
<Drower/>
</div>
And this is my Drawer
<div>
<Drawer anchor='right' open={this.state.open}>
<List>
<ListItem>
<ListItemIcon/>
</ListItem>
</List>
</Drawer>
</div>
How can I open and close the drawer?

Use below code for IconButton click
onClick={()=>{
this.setState(state => ({
open: !state.open
}));
}}

To open/close the Drawer you need to toggle the value of this.state.open in your state. Like so:
<div>
<button onClick={() => this.setState({ open: !this.state.open }))} >Open / Close Drawer </button>
<Drawer anchor='right' open={this.state.open}>
<List>
<ListItem>
<ListItemIcon/>
</ListItem>
</List>
</Drawer>
</div>

Disable button from clicking the parent element

I am building a Material UI app. I have a card component and I need to make it clickable. But there is also a button on the top right corner which edits the card on click. The problem is, when I click on that button, it'll handle 2 actions:
the edit action called on the button itself
clicks the card
Here is a snippet of code:
<CardActionArea href={`/${item.name}`}>
<Card key={index}>
<CardHeader
action={
<Fab color="secondary" onClick={handleClick}>
<EditIcon color={"primary"} />
</Fab>
}
/>
<CardContent className={classes.cardContent}>
<Avatar className={classes.avatar} alt={item.name} src={item.avatar} />
<Typography variant="h6" color="textSecondary">
Card description
</Typography>
</CardContent>
</Card>
</CardActionArea>
How could I achieve that?

In the card component you create both functions you want to run when clicking the card and the inner button:
const onCardClick = () => {
// your code here
}
const onButtonClick = () => {
onCardClick()
// your code here
}
In Card.jsx when rendering the button inside the card add the onButtonClick function
<MyButton onClick={onButtonClick}
then in your button component, you give it an onClick prop:
const MyButton = (props) => {
<Button onClick={prop.onClick}>title</Button>
}

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>
);
};