Create React Project

Create React folder in www with this code:

npx create-react-app react-modules

Once all the necessary files are installed, change directory into react-modules and start the application with:

npm start

Build the files ready to go to production:

npm build

We are creating buttons that open a modal window where the content of the modal window changes with each button.

Add this line to dependencies in package.json

"axios": "^0.24.0",

Update packages with this command: npm update

Open App.js

import React from "react";
import axios from "axios";
import "./styles.css";
class App extends React.Component {
	state = {
		show: false,
		content: "",
		title: "",
	};
	removeHTML(string){
		const regex = /(<([^>]+)>)/ig;
		const result = string.replace(regex, '');
		return result;
	}
	showModal = getContent => {
		if (typeof getContent === 'string' || getContent instanceof String){
			axios({
				method: "get",
				url: "http://api.tvmaze.com/search/shows?q="+getContent,
			}).then((response) => {
				let movies = response.data;
				let match = false;
				{movies.map((movie,i) => {
					if( movie.show.language === "English" && match === false ){
						match = true;
						this.setState({
							title: movie.show.name,
							content: this.removeHTML(movie.show.summary)
						});
					}
				})}
			}, (error) => {
				console.log(error);
			});
		}else{
			this.setState({
				content: "",
				title: "",
			});
		}
		this.setState({
			show: !this.state.show
		});
	};
	render() {
		return (
			<div className="App">
				<button
					className="toggle-button centered-toggle-button"
					onClick={e => {
						this.showModal("The Golden Girls");
					}}
				>
					Golden Girls
				</button>
				<button
					className="toggle-button centered-toggle-button"
					onClick={e => {
						this.showModal("Jane The Virgin");
					}}
				>
					Jane The Virgin
				</button>
				{this.state.show && (
					<div className="modal" id="modal">
						<h2>{this.state.title}</h2>
						<div className="content">
							{this.state.content}
						</div>
						<div className="actions">
						  <button className="toggle-button" onClick={this.showModal}>
							close
						  </button>
						</div>
					</div>
				)}
			</div>
		);
	}
}
export default App;

Add modal css to styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  transition: 1.1s ease-out;
  box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
}
.modal h2 {
  border-bottom: 1px solid #ccc;
  padding: 1rem;
  margin: 0;
}
.modal .content {
  padding: 1rem;
}
.modal .actions {
  border-top: 1px solid #ccc;
  background: #eee;
  padding: 0.5rem 1rem;
}
.modal .actions button {
  border: 0;
  background: #78f89f;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1;
}
button.centered-toggle-button {
  margin: 0 10px;
}
button {
	cursor: pointer;
}