I m new to React, although I tried many times, I could not use the model. I have one form, I want the model to be opened when the Send button is clicked in createAlbum.js. And if Ok button clicked in Model.js then run the addAlbum fuction in createAlbum.js. How can I run this model?

Edit : I can open/close my modal now but how can I run the "ok" button(in model.js) ie to add the album.

createAlbum.js :

import React, { Component,useState } from "react";
import Modal from "./Modal";
import AlbumConsumer from "../context";
import "./createAlbum.css"
class createalbum extends Component {
  
  state = {
    Album: "",
    Singer: "",
    Song: "",
    show : false
  };
setShow = async() => {
  const { show } = this.state;
  this.setState({show:true})
   console.log(show)
}
closeModel = async() => {
  const { show } = this.state;
  this.setState({show:false})
   console.log(show)
}
  changeInput = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

 
  addAlbum = (dispatch, count, e) => {
    const { Album, Singer, Song } = this.state;
    
    const newAlbum = {
      id: count   1,
      album: Album,
      singer: Singer,
      songs: [Song],
    };

   dispatch({ type: "Add_Album", payload: newAlbum });
    dispatch({ type: "count_Id", payload: 1 });
    e.preventDefault();
  };

  render() {
    const { Album, Singer, Song } = this.state;

    return (
      <AlbumConsumer>
        {(value) => {
          const { dispatch, count } = value;

          return (
            <div className="col-md-8 mb-4 createAlbum" >
              <div>
                
                <form onSubmit={this.addAlbum.bind(this, dispatch, count)}>
                  <div className="form-group">
                    <label htmlFor="album">Album</label>
                    <input
                      type="text"
                      placeholder="Album"
                      name="Album"
                      id="album"
                      className="form-control"
                      value={Album}
                      onChange={this.changeInput}
                      required
                      minLength={3}
                    ></input>
                  </div>
                  <div className="form-group">
                    <label htmlFor="singer">Şarkıcı</label>
                    <input
                      type="text"
                      placeholder="Şarkıcı"
                      name="Singer"
                      id="singer"
                      className="form-control"
                      value={Singer}
                      onChange={this.changeInput}
                      required
                      minLength={3}
                    ></input>
                  </div>
                  <div className="form-group">
                    <label htmlFor="song">Şarkı</label>
                    <input
                      type="text"
                      placeholder="Şarkı"
                      name="Song"
                      id="song"
                      className="form-control"
                      value={Song}
                      onChange={this.changeInput}
                      required
                      minLength={3}
                    ></input>
                  </div>

                  <button className="btn btn-primary btn-block" type="submit" >
                    Send
                  </button>
                 
                </form>
               
              </div>
              <button onClick={this.setShow.bind(this)}>This Button for modal</button>
              {this.state.show && <Modal show={this.show}close = {this.closeModel} album ={this.state.Album} song ={this.state.Song} singer = {this.state.Singer}/>}
             {/* <Modal />*/}
            </div>
          );
        }}
      </AlbumConsumer>
    );
  }
}

export default createalbum;

Model.js :

import React from "react";
import "./Modal.css";
const Modal = ({show,close,album,song,singer}) => {
    return (

        
        <div className="modalBackground col-md-8 mb-4">
            <div className="modalContainer col-md-8 mb-4">
                <div className="title"><h1>Albüm : {album}</h1></div>
                <div className="body"><p>Şarkıcı : {singer} Şarkı : {song} ; albüm listesine eklemek istediğinize emin misiniz ?</p></div>
                <div className="footer">
                    <button>Ok</button>
                    <button onClick={close}>Cancle</button>
                </div>

            </div>
        </div>
    )
}


export default Modal;

CodePudding user response：

I believe it's a typo you're importing from './Modal' but your filename is Model.js

CodePudding user response：

you can pass your add function as a props to the model like this

{this.state.show && <Modal show={this.show}close = {this.closeModel} album ={this.state.Album} song ={this.state.Song} singer = {this.state.Singer} addAlbum={this.addAlbum}/>}

and use it in your Modal like this:

const Modal = ({show,close,album,song,singer,addAlbum}) => {
    return (

        
        <div className="modalBackground col-md-8 mb-4">
            <div className="modalContainer col-md-8 mb-4">
                <div className="title"><h1>Albüm : {album}</h1></div>
                <div className="body"><p>Şarkıcı : {singer} Şarkı : {song} ; albüm listesine eklemek istediğinize emin misiniz ?</p></div>
                <div className="footer">
                    <button onClick={addAlbum}>Ok</button>
                    <button onClick={close}>Cancle</button>
                </div>

            </div>
        </div>
    )
}