How remove the default "CLICK" name for the button when using MDBModal?

Question

I am using the component from MDBreact : MDBModal

When i am importing this:

import Modal from "../Modal";

CODE:

import React from "react";
import axios from "axios";
import TableData from "../TableData";
import CustomForm from "../FormCliente";
import Modal from "../Modal";
//Función que conecta un componente a Redux store.
import { connect } from "react-redux";

import { createBrowserHistory } from 'history';

class ClienteList extends React.Component {
  state = {
    DataFromApi: []
  };

  fetchArticles = () => {
    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,
    };
    axios.get("http://192.168.196.49:8000/clientes/api/").then(res => {
      this.setState({
        DataFromApi: res.data
      });
    });
  }

  componentDidMount() {
    this.fetchArticles();
   }

  componentWillReceiveProps(newProps) {
    if (newProps.token) {
      this.fetchArticles();      
    }
  }


   render() {
    console.log("Token_desde_connect:", this.props.token);
    const history = createBrowserHistory();
    const location = history.location;
    console.log("debug_1.1: ", location)


    const dummy = event => {
      console.log('mostrando dummy:', event.target.id);
    }


      const encabezado = [

        {
          label: 'Cliente',
          field: 'nombre',
          sort: 'asc',
          width: 150
        },
        {
          label: 'Fecha de alta',
          field: 'fecha_alta',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Herramientas',
          field: 'usuario_id',
          sort: 'asc',
          width: 270
        }

      ];



    return (
      <div>
        <Modal requestType="post" btnText="Guardar" /> 
        <TableData data={this.state.DataFromApi} Encabezado={encabezado}/> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" itemID={null} btnText="Create" />

        <button id="dummy" onClick={dummy}>Dummy button</button>

      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default connect(mapStateToProps)(ClienteList);

MODAL CODE:

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
import { Form, Input, Button, DatePicker } from "antd";
import { connect } from "react-redux";
import axios from "axios";
import { createHashHistory } from 'history'

const FormItem = Form.Item;

class ModalPage extends Component {
  state = {
    modal: false
  };

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  }

  handleFormSubmit = async (event, requestType, itemID) => {
    event.preventDefault();

    const postObj = {
      fecha_alta: event.target.elements.fecha_alta.value,
      nombre: event.target.elements.nombre.value,
      usuario_id: event.target.elements.usuario_id.value
    }

    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,

    };
    const history = createHashHistory();

    if (requestType === "post") {
      await axios.post("http://192.168.196.49:8000/clientes/api/create/", postObj)
        .then(res => {
          if (res.status === 201) {
            history.push("/proyectos/clientes/");


          }
        })
    } else if (requestType === "put") {
      await axios.put(`http://192.168.196.49:8000/clientes/api/${itemID}/update/`, postObj)
        .then(res => {
          if (res.status === 200) {
            history.push("/proyectos/clientes/");
          }
        })
    }
  };

  render() {
    return (
      <MDBContainer>
        {/* BUTTON */}
        <MDBBtn color="info" onClick={this.toggle}>Click</MDBBtn>
        {/* MODAL */}
        <MDBModal isOpen={this.state.modal} toggle={this.toggle}  backdrop={false}   >
          <MDBModalHeader toggle={this.toggle}>Nuevo cliente:</MDBModalHeader>
          <MDBModalBody>

          <Form
          onSubmit={event =>
            this.handleFormSubmit(
              event,
              this.props.requestType,
              this.props.itemID
            )
          }
        >
          <FormItem label="Nombre">
            <Input name="nombre" placeholder="Nombre del cliente aquí..." />
          </FormItem>
          <FormItem label="ID">
            <Input name="usuario_id" placeholder="ID del usuario" />
          </FormItem>
          <FormItem label="Fecha de Alta">
            <DatePicker name="fecha_alta" />
          </FormItem>
          <FormItem>
          <MDBBtn size="sm" color="light-blue" htmlType="submit">
              {this.props.btnText}
              </MDBBtn>
          </FormItem>
          </Form>


          </MDBModalBody>


        </MDBModal>
      </MDBContainer>
    );
  }
}

const mapStateToProps = state => {
    return {
      token: state.token
    };
  };

  export default connect(mapStateToProps)(ModalPage);

btnText is used to give the name to my subbit button inside the modal. But how to cahnge the default name "Clik" before opening the modal?

Does this document help? https://mdbootstrap.com/docs/vue/modals/basic/ — keikai, Mar 29 '20 at 12:58
So you want to remove the button? Or change the text from `CLICK` to `Click`? — keikai, Mar 29 '20 at 13:25
This line: call the component modal. when render an show up the name is "CLICK" only need to change the name to: "NEW CLIENT" — Kentron.dna, Mar 29 '20 at 14:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210529/discussion-between-kentron-dna-and-keikai). — Kentron.dna, Mar 29 '20 at 14:23

score 0 · Answer 1 · answered Mar 29 '20 at 18:05

0

I found the solution is inside the modal:

<MDBBtn size="sm" color="light-blue" onClick={this.toggle}>Nuevo</MDBBtn>

answered Mar 29 '20 at 18:05

Kentron.dna

183
11

How remove the default "CLICK" name for the button when using MDBModal?

1 Answers1