Utilizing the "Ok" button in ANTd Modal in React

Question

I am creating a movie website that displays Modals of movies when you click on the movie card. I'm able to handle the "onCancel" which turns setActivateModal to false and closes the Modal, but I also want to allow the "Schedule" button to do something. The intended behavior is to have the "Schedule" button generate a different form in which I can fill out to "schedule" a movie with basic form entries that are then sent to my database. I'm not struggling with the form, but I'm struggling with how to handle generating one with the "Schedule" button. I'm unsure if you are allowed to do "nested" Modals, but any way it can be handled is fine.

import React, { useEffect, useState } from 'react';
import {
  Layout,
  Input,
  Row,
  Col,
  Card,
  Tag,
  Spin,
  Modal,
  Typography,
  Button,
} from 'antd';
import 'antd/dist/antd.css';

const { Content } = Layout;
const { Search } = Input;
const { Meta } = Card;
const TextTitle = Typography.Title;

const SearchBox = ({ searchHandler }) => {
  return (
    <Row>
      <Col span={12} offset={6}>
        <Search
          placeholder="Search for movies to schedule!"
          enterButton="Search"
          size="large"
          onSearch={value => searchHandler(value)}
        />
      </Col>
    </Row>
  );
};

const MovieCard = ({
  Title,
  imdbID,
  Poster,
  ShowDetails,
  DetailRequest,
  ActivateModal,
}) => {
  const clickHandler = () => {
    ActivateModal(true);
    DetailRequest(true);

    fetch(`http://www.omdbapi.com/?i=${imdbID}&apikey=xxxxxxxx`)
      .then(resp => resp)
      .then(resp => resp.json())
      .then(response => {
        DetailRequest(false);
        ShowDetails(response);
      });
  };

  return (
    <Col style={{ margin: '50px' }} span={3}>
      <div>
        <Card
          style={{ width: 300 }}
          cover={
            <img
              alt={Title}
              src={
                Poster === 'N/A'
                  ? 'https://placehold.it/198x264&text=Image+Not+Found'
                  : Poster
              }
            />
          }
          onClick={() => clickHandler()}
        >
          <Meta title={Title} />
        </Card>
      </div>
    </Col>
  );
};

const MovieDetail = ({
  Title,
  Actors,
  Released,
  Rated,
  Runtime,
  Genre,
  Poster,
  Plot,
}) => {
  return (
    <Row>
      <Col span={11}>
        <img
          src={
            Poster === 'N/A'
              ? 'https://placehold.it/198x264&text=Image+Not+Found'
              : Poster
          }
          alt={Title}
        />
      </Col>
      <Col span={13}>
        <Row>
          <Col>
            <TextTitle>{Title}</TextTitle>
          </Col>
        </Row>
        <Row style={{ marginBottom: '.7em' }}>
          <Col>{Actors}</Col>
        </Row>
        <Row style={{ marginBottom: '.7em' }}>
          <Col>
            <Tag>{Released}</Tag>
            <Tag>{Rated}</Tag>
            <Tag>{Runtime}</Tag>
            <Tag>{Genre}</Tag>
          </Col>
        </Row>
        <Row>
          <Col>{Plot}</Col>
        </Row>
      </Col>
    </Row>
  );
};

const Loader = () => (
  <div>
    <Spin />
  </div>
);

function Movies() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [query, setQuery] = useState('');
  const [activateModal, setActivateModal] = useState(false);
  const [details, setShowDetails] = useState(false);
  const [detailRequest, setDetailRequest] = useState(false);

  useEffect(() => {
    setError(null);
    setData(null);

    fetch(`http://www.omdbapi.com/?s=${query}&apikey=xxxxxxxx`)
      .then(resp => resp)
      .then(resp => resp.json())
      .then(response => {
        if (response.Response === 'False') {
          setError(response.Error);
        } else {
          setData(response.Search);
        }
      })
      .catch(({ message }) => {
        setError(message);
      });
  }, [query]);

  return (
    <div className="Movies">
      <Layout className="layout">
        <Content>
          <div style={{ background: '#4a576e', padding: 60, minHeight: 300 }}>
            <SearchBox searchHandler={setQuery} />
            <br />
            <Row justify="center">
              {data !== null &&
                data.length > 0 &&
                data.map((result, index) => (
                  <MovieCard
                    ShowDetails={setShowDetails}
                    DetailRequest={setDetailRequest}
                    ActivateModal={setActivateModal}
                    key={index}
                    {...result}
                  />
                ))}
            </Row>
          </div>
          <Modal
            title="Details"
            centered
            visible={activateModal}
            onCancel={() => setActivateModal(false)}
            /* onOk= {() => What do I put here? */
            width={800}
            footer={[
              <Button key="cancel" onClick={() => setActivateModal(false)}>
                Cancel
              </Button>,
              <Button
                key="schedule" /* onClick={() => setActivateForm(true)} */
              >
                Schedule
              </Button>,
            ]}
          >
            {detailRequest === false ? (
              <MovieDetail {...details} />
            ) : (
              <Loader />
            )}
          </Modal>
        </Content>
      </Layout>
    </div>
  );
}

export default Movies;

Answer 1

Assuming all the routes are set up properly in your App.js, add the following changes:

Add this to your import list:

import { Link } from "react-router-dom";

In the Movies function, add the const [activeForm, setActiveForm] = useState(false); as shown below

function Movies() {

const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [query, setQuery] = useState('');
const [activateModal, setActivateModal] = useState(false);
const [details, setShowDetails] = useState(false);
const [detailRequest, setDetailRequest] = useState(false);
const [activateForm, setActivateForm] = useState(false);

In the return for your function, in the div tag right under the "Content" tag, add ActivateForm={setActivateForm} as shown below.

                <div style={{ background: '#4a576e', padding: 60, minHeight: 300 }}>
                    <SearchBox searchHandler={setQuery} />
                    <br />
                    <Row justify="center">
                        { data !== null && data.length > 0 && data.map((result, index) => (
                            <MovieCard 
                                ShowDetails={setShowDetails} 
                                DetailRequest={setDetailRequest}
                                ActivateModal={setActivateModal}
                                ActivateForm={setActivateForm}
                                key={index} 
                                {...result} 
                            />
                        ))}
                    </Row>
                </div>

Finally, in the Modal tag, append to the "onOk" as such, and also in your Modal footer, add the following for "onClick".

                    <Modal
                    title='Details'
                    centered
                    visible={activateModal}
                    onCancel={() => setActivateModal(false)}
                    onOk={() => setActivateForm(true)}
                    width={800}
                    footer={[
                        <Button key="cancel" onClick={() => setActivateModal(false)}>
                            Cancel
                        </Button>,
                        <Button key="schedule" onClick={() =>setActivateForm(true)}><Link to='/ScheduleForm'>Schedule</Link ></Button>
                      ]}
                    >
                    { detailRequest === false ?
                        (<MovieDetail {...details} />) :
                        (<Loader />) 
                    }
                </Modal>