How to change Modal state from outside the React class? - javascript

I am trying to call my modal by changing the state from outside the react class. But so far no luck. I tried the following:
I have a method named Portfolio which needs to activate the modal once user click on the Image
const Portfolio = (props) =>
<div className="col-sm-4">
<div className="mb-2">
<img
onClick={this.toggle}
className="card-img-top"
src={"/assets/imgs/project/"+props.portfolio.img_thumb}
alt="" />
</div>
</div>
Here is the Class that contain the state and the modal. But I cannot change state to activate the modal.
class Project extends React.Component
{
constructor(props, context) {
super(props, context);
this.state = {
modal: false,
}
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render(){
return (
<div className="row portfolioWrap">
// here resides our modal which activate once modal state changed
<div>
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
{this.state.gallery.map(gallery =>
<img
className="card-img-top"
src={"/assets/imgs/project/"+gallery} alt="" />)
}
</ModalBody>
<ModalFooter></ModalFooter>
</Modal>
</div>
// calling portfolio method inside the loop
{currentTodos.map(item => <Portfolio key={item.title} portfolio={item} />)}
</div>
)
}
}
I am trying to activate the modal from Portfolio function. But since its outside the class scope i cannot access the state. Is there any way to accomplish this?

You can pass the toggle method to your Portfolio component then use it from the props.
<Portfolio key={item.title} toggle={this.toggle} portfolio={item} />
Then in Portfolio:
const Portfolio = (props) =>
<div className="col-sm-4">
<div className="mb-2">
<img
onClick={props.toggle}
className="card-img-top"
src={"/assets/imgs/project/"+props.portfolio.img_thumb}
alt="" />
</div>
</div>

Related

react onclick routing redirecting whithout click

I want to change page when the div is clicked but when the page loads it automatically navigates to another page without clicking the div.
Why is the code navigating without clicking?
import React, { Component } from "react";
import { useNavigate } from "react-router-dom";
export function Homerouter(props) {
const navigate = useNavigate()
return(<Home navigate={navigate}></Home>)
}
export default class Home extends Component{
state = {categor: [{categ:"cat1", img: "https://teelindy.com/wp-content/uploads/2019/03/default_image.png"}, {categ:"cat2", img: "./imgs/notfound.png"}, {categ:"cat3", img: "./imgs/notfound.png"}, {categ:"cat4", img: "./imgs/notfound.png"}, {categ:"cat5", img: "./imgs/notfound.png"}, {categ:"cat6", img: "./imgs/notfound.png"}]}
linkto(name) {
//doing something else
this.props.navigate(name)
}
createelem() {
return(
<div className="cont text-center">
<div className="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
{this.state.categor.map((items, index) => {
return (
<div key={items.categ} className="col">
<div onClick={this.linkto("a")} className="card">
<img src={(items.img)} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{items.categ}</h5>
</div>
</div>
</div>
);
})}
</div>
</div>
)
}
render() {
return(
<React.Fragment>
{this.createelem()}
</React.Fragment>
)
}
}
Cause you're invoking the function linkto immediately. Wrap this.linkto("a") as this:
onClick={() => this.linkto("a")}
Issue
You've a callback that is being immediately invoked when the component renders.
{this.state.categor.map((items) => {
return (
<div key={items.categ} className="col">
<div
onClick={this.linkto("a")} // <-- immediately called when rendered
className="card"
>
...
</div>
</div>
);
})}
Solution
You can either pass an anonymous callback function:
<div
onClick={() => this.linkto("a")}
className="card"
>
...
</div>
Or convert linkto to a curried function:
linkto(name) {
...
return e => {
// do anything with the click event e if necessary
this.props.navigate(name); // navigate
};
}
...
<div
onClick={this.linkto("a")}
className="card"
>
...
</div>
Or if there isn't any additional logic necessary directly call navigate in an anonymous callback:
<div
onClick={() => this.props.navigate("a")}
className="card"
>
...
</div>

i would like to make an individual process in a map function like toggle on click

i want to make a button toggle on each div i click in map function but the buttons toggle in
whole dives on one click (i want to make each click toggle abutton on only the div that i clicked not all of them) ...................................................................................................
import React,{Component} from 'react'
import './course.css'
import Downloadcourse from './../download/down.js'
import {Transition,animated} from 'react-spring/renderprops'
class Course extends Component{
constructor(){
super();
this.state={
search:'',
showcomponent:false,
};
}
updatesearch=(e)=>{
this.setState({search:e.target.value.substr(0,20)});
}
downtoggle=(index)=>{
this.setState({showcomponent:!this.state.showcomponent})
}
render(){
let filteredcontacts= this.props.corses.filter(
(item)=>{
return item.name.toLowerCase().indexOf(
this.state.search.toLowerCase()) !== -1 ;
}) ;
let length= this.props.corses.length;
const courselist=length ?(
filteredcontacts.map((item,index)=>{
return (
<div className="col-sm-3 cat" key={item.id}>
<div className="maincover" >
<div className="mainimg" onClick={this.downtoggle}>
</div>
<div className="maincorse">
<div className="row course-title">
<h1 className="course-Name">{item.name}</h1>
</div>
<div className="row course-title">
<button className="removeing" onClick={()=>{this.props.deleteing(index)}}>Remove
Course</button>
</div>
<div className="row download">
<Transition
native
items={this.state.showcomponent}
from={{ position: 'absolute', overflow: 'hidden', height: 0 }}
enter={[{ height: 'auto' }]}
leave={{ height: 0 }}>
{show=>show &&(props=>(
<animated.div style={props}>
<Downloadcourse />
</animated.div>
))}
</Transition>
</div>
</div>
</div>
</div>
)}
)) :(
<div className="no-content">
<h2>no content to show</h2>
</div>
)
return(
<div className="course">
<input type="text" className="input-search" onChange={this.updatesearch}/>
<span className="magnficant"> 🔍</span>
<div className="row category">
{courselist}
</div>
</div>
)
}
}
export default Course;
To make multiple elements toggleable you need to store each element's toggled state in some data structure. A javascript object ({}) comes in handy for this.
Convert this.state.showComponent from boolean to object
this.state={
search: '',
showComponent: {},
};
Use the index passed to toggle handler to update toggled state
downtoggle = (index) => {
this.setState(prevState => ({
showComponent: {
...prevState.showComponent, // <-- spread existing state
[index]: !prevState.showComponent[index], // <-- toggle value
},
}));
}
Ensure index is passed to the toggle handler
onClick={() => this.downtoggle(index)}
Check the toggled state for the transition component
<Transition
// ... other props
items={this.state.showComponent[index]} // <-- truthy/falsey
/>

How to make a button click another button from different components in React

I'm new to react and it is kinda hard to understand the one way data flow on it, i was making a simple app and i'm using mdbootstrap for some ready bootstrap components, I imported the component of a modal (which has a button when clicked it toggles a modal) so in my app i have cards, each one has a button that's supposed to toggle the button, but i couldn't figure out how to link the card's button with the mdbootstrap component's button.
The Card component:
import React, { Component } from 'react';
import ModalPage from './modal.jsx'
class Card extends Component {
render() {
return (
<div>
<div className="card m-5" style={{ width: '18rem' }}>
<img src={this.props.img} className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{this.props.title}</h5>
<p className="card-text">{this.props.desc}</p>
<button onClick={/*I don't know what exactly i should put here */}></button>
</div>
</div>
</div>
)
}
}
export default Card;
The modal componant:
import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
class ModalPage extends Component {
state = {
modal13: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
{/* This is the button I want to click when clicking the card's button */}
<MDBBtn color="primary" onClick={this.toggle(13)}>
Modal
</MDBBtn>
<MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
<MDBModalHeader toggle={this.toggle(13)}>
{this.props.title}
</MDBModalHeader>
<MDBModalBody>
{/* edit here */}
{this.props.content}
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(13)}>
Close
</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Rather than having 2 click events you only need one on the child component. Instead of trying to send a click to the parent button in order to call toggle() just pass the toggle function to the child to be called:
Card:
import React, { Component } from 'react';
import ModalPage from './modal.jsx'
class Card extends Component {
render() {
return (
<div>
<div className="card m-5" style={{ width: '18rem' }}>
<img src={this.props.img} className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{this.props.title}</h5>
<p className="card-text">{this.props.desc}</p>
//*****************************************
<button onClick={this.props.click}></button>
//*****************************************
</div>
</div>
</div>
)
}
}
export default Card;
Modal:
import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
class ModalPage extends Component {
state = {
modal13: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
{/* I am assuming that this is a reference to <Card /> - simply pass in the onClick function as a parameter. You can even use onClick here and this.props.onClick in the child element */}
<MDBBtn color="primary" click={this.toggle(13)}>
Modal
</MDBBtn>
<MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
<MDBModalHeader toggle={this.toggle(13)}>
{this.props.title}
</MDBModalHeader>
<MDBModalBody>
{/* edit here */}
{this.props.content}
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(13)}>
Close
</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;

Pass value between tabs on onClick event in ReactJS

This is the component I am working on. I have three tab named newOrder, currentOrder and orderHistory.
How can I move a card in New Order tab, to Current Order tab when I press 'Accept' button on card.
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = {
key: 'home',
};
}
render() {
return (
<Tabs id="controlled-tab-example" activeKey={this.state.key}
onSelect{key => this.setState({ key })}>
<Tab eventKey="newOrder" title="New Order">
//this is the card with Accept button.
<div class="card">
<div class="card-body">
<Button type="button>Accept</Button>
</div>
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order"></Tab>
<Tab eventKey="orderHistory" title="OrderHistory"></Tab>
</Tabs>
);
}
}
This can be achieved by using the component state. You may refer this link: https://reactjs.org/docs/state-and-lifecycle.html

React - How to show component from an image onClick event in another component?

I have 3 React components:
-Home - need to display the component here when image is
clicked from the Header component
-Header- Contains the image tag that will be clicked to
show the AllSites Component.
-AllSites - component that needs displayed in Home component when Image is
clicked in the Header component.
Header
export class Header extends React.Component<any, any> {
private readonly searchServerUrl = "";
private appButtonElement: HTMLElement;
constructor(props: any) {
super(props);
this.state = { showAppMenu: false };
}
render() {
const { showAppMenu } = this.state;
const { className, navItems, singleColumn, appItems } = this.props;
return (
<header className={className}>
<div className="app-icon">
<button className="nav-button" onClick={() => this.toggleAppMenu()} ref={(menuButton: any) => this.appButtonElement = menuButton}><i className="ms-Icon ms-Icon--Waffle" aria-hidden="true"></i></button>
</div>
***When image is clicked, show the <AllSites/> component in the HomeComponent below.***
<img src="/Styles/Images/logo/loop-logo-white.png" className="nav-logo" onClick={} />
{showAppMenu ? <ApplicationMenu navItems={appItems} targetElement={this.appButtonElement} onDismiss={() => this.onDismiss()} /> : null}
<div className="nav-container"><TopNavigation classNam
e={className} navItems={navItems} singleColumn={singleColumn} /></div>
<div className="search-container">
<SearchBox onSearch={(searchTerm: string) => this.executeSearch(searchTerm)} />
</div>
</header>
);
}
Home
export class HomeComponent extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { navItems: [], appItems: [], singleColumnLayout: false, showAllSites: false };
}
componentDidMount() {
this.checkWidth();
window.addEventListener("resize", this.checkWidth.bind(this));
this.fetchNavigation()
.then(nav => this.setState({ navItems: nav }));
this.fetchAppIcons()
.then(icons => this.setState({ appItems: icons }));
}
componentWillUnmount(): void {
window.addEventListener("resize", this.checkWidth.bind(this));
}
render() {
const { navItems, appItems, singleColumnLayout } = this.state;
return (
<Fabric>
<Header navItems={navItems} appItems={appItems} singleColumn={singleColumnLayout} />
<div className="main-container">
<AlertBar />
<div className="main-content">
<div className="ms-Grid">
When the image tag is clicked, I need to render the <AllSites/> component here
<Hero singleColumn={singleColumnLayout} />
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container">
<UpcomingEvents />
</div>
<div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container">
<EmployeeNews />
</div>
<div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 webpart-container">
<IndustryNews />
</div>
<div className="ms-Grid-col ms-sm12 webpart-container">
<Quote />
</div>
</div>
</div>
</div>
</div>
<Footer navItems={navItems} />
</div>
</div>
</Fabric>
);
}
In the simplest approach you will need a common parent component for your Home and Header that will hold some shared state for them and that will pass a callback to update this state as a prop to Header. In the shared state you need a flag that will be responsible for showing/hiding AllSites component, this flag you will pass as a prop to Home.
You can see a basic example here
If you need a more advanced state management solution, you can check redux library

Categories

Resources