Hola, estoy tratando de mostrar un modal cada vez que mi API responde con un error. ¿Pueden ayudarme? Cómo puedo hacerlo ? estoy usando ganchos de reacción
const restService = (path, responseType = 'json') => { const apiUrl = `${CONFIG.API_HOST}/${path}`; const create = async (body) => { const config = { responseType }; try { const response = await axios.post(apiUrl, body, config); return response.data; } catch (errors) { //show modal return {errors}; } }; return { find, create, update, remove }; };Modal y ajustes para activar el modal
Puede lograr esto usando el Renderizado Condicional de React .
Aquí hay un ejemplo de cómo lograr esto:https://dev.to/kevhines/triggering-an-error-modal-in-react-3pm9
El componente del mensaje de error al final del artículo se parece a esto:
import React from "react"; import {connect} from 'react-redux' import clearError from '../actions/clearError' class ErrorModal extends React.Component { state = { show: false }; onClick = (e) => { this.setState({ show: false }); this.props.clearError() }; componentDidUpdate(prevProps) { if (this.props.error && !prevProps.error) { this.setState({ show: true }); } } render() { if(!this.state.show){ return null; } return <div className="modal" id="modal"> <div> <a href="#close" title="Close" className="close" onClick={this.onClick}>X</a> <h2>Error Message</h2> <p>{this.props.error}</p> </div> </div> } } function mapStateToProps(state) { return {error: state.error} } export default connect(mapStateToProps, {clearError})(ErrorModal)