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

Change text value on button click

I am new in REACT JS so while making an app I am stuck at this part where i want to change h1 value when the button is clicked
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
function App() {
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>this text should change</h1>
<Button className=" btn btn1" color="light">YES</Button> // this button should change the text
<Button className=" btn btn2" color="light">NO</Button>
</div>
</Row>
</Container>
);
}
export default App;

Never access the real DOM. Use states and render it the React way.
I would generally use a state to change something - refer Using the State Hook. And then render it out. Create this:
const [Text, setText] = useState("this text should change");
Render it:
<h1>{Text}</h1>
Use the event handler and use a type="button" so that it doesn't refresh the page:
<Button
className=" btn btn1"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on YES button!");
}}
>
YES
</Button>
{/*// this button should change the text*/}
<Button
className=" btn btn2"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on NO button!");
}}
>
NO
</Button>
Now see the magic: https://557w4.csb.app/
Code:
import Button from "react-bootstrap/Button";
import "./App.css";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { useState } from "react";
function App() {
const [Text, setText] = useState("this text should change");
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>{Text}</h1>
<Button
className=" btn btn1"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on YES button!");
}}
>
YES
</Button>
{/*// this button should change the text*/}
<Button
className=" btn btn2"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on NO button!");
}}
>
NO
</Button>
</div>
</Row>
</Container>
);
}
export default App;
Preview
Full CodeSandBox: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js

In this case, you have to use the hook state (Documentation).
So, first of all you have to import the useState hook, then create it and finally use it.
So, your code will be something like that:
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { useState } from 'react';
function App() {
const [text, setText] = useState("this text should change");
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>{text}</h1>
<Button className=" btn btn1" color="light" onClick={e => setText("new text")}>YES</Button> // this button should change the text
<Button className=" btn btn2" color="light">NO</Button>
</div>
</Row>
</Container>
);
}
export default App;

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

How to make the background of a react Modal solid

So I have just added a Modal from react-Modal to a page through a button click, the problem I am facing is when i click that button to make the modal pop up, it does but the content of the page the modal covers seeps through, so the Modal looks like this.
The table etc shouldn't be there, only a blank white screen.
Can anyone help me please?
Below is the first class where I click to show the modal.
const [showModal, setShowModal] = useState(false)
<button onClick={() => { setShowModal(true) }} className="paddingNextButton float-right viewButtonHover btn btn-md btn-outline-secondary"> Next</button>
<ModalForm isModalOpen={showModal} closeModal={() => { setShowModal(false) }} />
Below is another class of the Modal itself.
import React from 'react'
import Modal from 'react-modal'
import { Overlay } from 'react-bootstrap'
Modal.setAppElement('#root')
function ModalForm({ isModalOpen, closeModal }) {
return (
<div>
<Modal isOpen={isModalOpen} onRequestClose={closeModal}
style={
{
overlay: {
backgroundColor: "grey"
},
content: {
color: "red"
}
}
}
>
<h1>Title</h1>
<p></p>
</Modal>
</div>
)
}
export default ModalForm

Ah, I see the problem now. You don't have a Modal.Body, or a Modal.Header for that matter. What you need should be something like this:
<Modal isOpen={isModalOpen} onRequestClose={closeModal} style={{...}}>
<Modal.Header closeButton>
<Modal.Title>
Title
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Modal body goes here</p>
</Modal.Body>
</Modal>

custom modal does not appear react.js

I'm trying to call this Modal, but does not appear. I tried to put the Modal into a render() but it does not work too. I used inspect element tool and it shows the div from Modal but show it "grey".
This is the Modal
import React from 'react';
import './Modal.css';
const modal = props =>(
<div className="modal">
<header className="modal__header">
<h1>{props.title}</h1>
</header>
<section className="modal__content">
{props.children}
</section>
<section className="modal__actions">
{props.canCancel && (<button className="btn" onClick={props.onCancel}>Cancel</button>)}
{props.canConfirm &&(<button className="btn" onClick={props.onConfirm}>Confirm</button>)}
</section>
</div>
);
export default modal;
and I´m trying to call the Modal here
import React,{Component} from 'react';
import Modal from '../components/Modal/Modal.js';
import './Investments.css';
class InvestmentsPage extends Component{
render(){
return(
<React.Fragment>
<Modal>
<p>Modal content</p>
</Modal>
<div className="investment-control">
<p>Modal</p>
<button className="btn btnt1" >Crear </button>
</div>
</React.Fragment>);
}
}
export default InvestmentsPage;

Your approach is wrong. I am guessing here your modal is hidden under some other DOM element. You should use ReactDOM.createPortal() for modals, tooltips etc. :
In index.html under the existing div with id='root' create new
div with id='modal';
In your modal Component as listed above import ReactDOM from 'react-dom'
and return
ReactDOM.createPortal(your_JSX_here, document.querySelector('#modal'))