Develop Reference

antd css - antd Modal css is not loading

i have created a antd modal and i want to change modal body color to red here is my code,had applied background color but it is not showing also i want to align image and modalName in a row using flex, i have intalled antd version 4.2, and i am using styled components. dont know whats wrong.please help,and thanks in advance.
modal.js
import React , {useState} from "react";
import { Modal ,Button} from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";
const Modall = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const showModal = () => {
setIsModalVisible(true);
}
const handleOk = () => {
setIsModalVisible(false);
}
const handleCancel = () => {
setIsModalVisible(false);
}
return (
<Wrapper>
<div className="head">hello</div>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
>
<div className="modalName">hello</div>
<div className="modalHead">
<img src='simple.svg' className="newStyle"></img>
<div className="modalName" >beautiful</div>
/div>
</Modal>
</Wrapper>
);
}
export default Modall;
const Wrapper = styled.div`
.ant-modal, .ant-modal-content .ant-modal-body .modalHead{
display:flex;
}
.ant-modal, .ant-modal-content .ant-modal-body{
background:red;
}
`

not sure but i think you need to add 'bodyStyle' in your modal to add a background to your modal , kinda like this
<Modal
title="Basic Modal"
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
bodyStyle={{
backgroundColor: "red"
}}
>

you should put Wrapper in modal body, try this:
return (
<>
<div className="head">hello</div>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
className="modalStyle"
>
<Wrapper><div className="modalName">hello</div></Wrapper>
</Modal>
</>
);
const Wrapper = styled.div`
background:red;
`
https://codesandbox.io/s/determined-chatelet-es5big?file=/src/App.js

I am trying to change image by clicking buttons using React.js but getting error

I want my code to change Image when I click a button but it is giving me error saying
"Warning: Expected onClick listener to be a function, instead got a value of object type."
Here is the code:-
import React from 'react'
import './BigAd.css'
import ad1 from './ad1.jpg'
import ad2 from './ad2.jpg'
import ad3 from './ad3.jpg'
import ad4 from './ad4.png'
export default function BigAd() {
const ChangeImage = async (fileName)=>{
let img = document.querySelector("#BannerAd")
img.setAttribute("src", fileName)
}
return (
<div>
<div className="container">
<img id='BannerAd' src={ad1} alt="Ad"/>
<button onClick={ChangeImage({ad1})}>button 2</button>
<button onClick={ChangeImage({ad2})}>button 3</button>
<button onClick={ChangeImage({ad3})}>button 1</button>
<button onClick={ChangeImage({ad4})}>button 4</button>
</div>
</div>
)
}

So my method was completely wrong this is not how you manipulate DOM in react.js. I had to use UseState to get my code working here is how I fixed it:-
import React, {useState} from 'react'
import './BigAd.css'
import ad1 from './ad1.jpg'
import ad2 from './ad2.jpg'
import ad3 from './ad3.jpg'
import ad4 from './ad4.png'
export default function BigAd() {
const [Image, setImage] = useState(ad1)
const ChangeImage = async (Image)=>{
setImage(Image);
}
return (
<div>
<div className="container">
<img id='BannerAd' src={`${Image}`} alt="Ad"/>
<button onClick={() => ChangeImage(ad1)}>button 1</button>
<button onClick={() => ChangeImage(ad2)}>button 2</button>
<button onClick={() => ChangeImage(ad3)}>button 3</button>
<button onClick={() => ChangeImage(ad4)}>button 4</button>
</div>
</div>
)
}

Conditioner Modal Rendering When Input Is In Focus State Not Working

In my react Project, I want a modal to popup when the input field is in the hover state. I'm using the react-bootstrap modal. But the problem I'm having is that it's only the modal button that displays when the input is in the focus state. The modal should pop up automatically when the input is being focused. My code below. Kindly assist
App Component
import React, { useState, useEffect } from "react";
import stays from "./Components/stays.json";
import FancyModalButton from "./Components/FancyModalButton";
export default function SearchGuest() {
const [Data, setData] = useState([]);
const [filteredData, setFilteredData] = useState(Data);
const [hasFocus, setFocus] = useState(false);
useEffect(() => {
setData(stays);
setFilteredData(stays);
}, []);
return (
<>
<form action="">
{hasFocus ? <FancyModalButton /> : null}
<input
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
type="text"
name="guest"
placeholder="text"
style={{ border: "1px solid yellow" }}
/>
<input type="number" name="location" placeholder="number" />
<button>Search</button>
</form>
{console.log(filteredData)}
</>
);
}
Modal Component
import React, { useState } from "react";
// import Modal from "styled-react-modal";
import { Button, Modal } from "react-bootstrap";
export default function FancyModalButton() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
The Image of What I have

Custom PopUp modal component not showing when clicked in React

I am trying to show a custom PopUp component on the screen when a user clicks on the Info icon but nothing is rendering in the UI when clicked.
I'm not exactly certain where I'm going wrong if anyone could provide some guidance?
Here is my Card component with PopUp inside the return:
import React, { useState } from 'react';
import { Card } from 'react-bootstrap';
import InfoIcon from '#material-ui/icons/Info';
import PopUp from './PopUp';
const WelcomeCard = (props) => {
const [show, setShow] = useState(false);
const togglePop = () => {
setShow(true);
};
return (
<Card className='m-3 p-2 welcome-card rounded'>
<Card.Body>
<Card.Text className='mt-4'>{props.text}</Card.Text>
<Card.Title>{props.title}</Card.Title>
<button>{props.button}</button>
{show && <PopUp toggle={togglePop} />}
<InfoIcon className='info-icon' onClick={togglePop} />
</Card.Body>
</Card>
);
};
export default WelcomeCard;
And my actual PopUp component itself:
import React from 'react';
const PopUp = (props) => {
const handleClick = () => {
props.toggle();
};
return (
<div className='modal'>
<div className='modal_content'>
<span className='close' onClick={handleClick}>
×
</span>
<form>
<h3>Register!</h3>
<label>
Name:
<input type='text' name='name' />
</label>
<br />
<input type='submit' />
</form>
</div>
</div>
);
};
export default PopUp;
Would really appreciate some help on this one to understand it better, thanks in advance!

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;