CODEWITHSUNDEEP
reactjsionic-framework
Harold Castro Castillo
Harold Castro Castillo

Reputation: 17

No IonPage was found to render. Make sure you wrap your page with an IonPage component

Today trying to make a component like any other in ionic + React returned an error and I could not fix it, someone has some solution to it?

import React from 'react';

import * as firebase from 'firebase/app';
import { IonPage, IonContent } from '@ionic/react';
import BackHeader from '../../components/BackHeader/BackHeader';


interface props {
    id: string
}
interface state {
    view: string,
    clients: any
}
export default class FinancialState extends React.Component<props, state>{
constructor(props : props){
    super(props);
    this.state = {
        view: "search",
        clients: "loading"
    }
}

    async componentDidMount(){
        const data = await firebase.firestore().collection('my_companies').doc(this.props.id).get();
        return this.setState({
            clients: data.data()
        })
    }
    /**Manejador de vistas donde VISTA-1 = Buscar el cliente VISTA-2 = Subir el archivo */
    controller(){
        if(this.state.view === "search") return <Finder clients={this.state.clients.companies} />
    }
    render(){
        return(
           <>
            <IonPage>
                <BackHeader route="/Home"/>
                <IonContent>
                    {this.controller()}

                    contenido
                </IonContent>
            </IonPage>
           </>
        );
    }
}


interface propsFinder {
    clients: any
}
const Finder : React.FC<propsFinder> = (props : propsFinder)=>{
console.log(props);

    return(
        <div>
            <div className="containerImage">
                <img src="https://image.flaticon.com/icons/png/512/64/64673.png" alt="lupa" />
            </div>
            <div id="boxFinder">
                <input type="text" />
            </div>
            <div id="results">
             {/**Resultados de la busqueda */}
            </div>
        </div>
    );
}

I have tried almost everything possible and I can not make it work, coincidentally in other components with the same structure works perfect, it should be noted that there is nothing unusual to say, it is a simple component that is referenced to a route

Upvotes: 0

Views: 587

Answers (1)

JavaJedi
JavaJedi

Reputation: 399

This appears to be a bug reported here: https://github.com/ionic-team/ionic/issues/19977

I noticed it when I updated to ionic-react v4.11.5.

Upvotes: 1

Related Questions