Type '{}' is missing the following properties from type 'Readonly'

Question

I'm having a bit of trouble using an API in React, I'm trying to pass the title, description and daily price to my application home, but I'm getting the error "Type '{}' is missing the following properties from type 'Readonly': imagem, titulo, descricao, diaria, and 2 more."

I've tried working on the interface putting some values as optional, but it didn't work and I would like some help, here are the 3 files that are being used.

Casa.ts

export interface Casa {
  id?: string;
  imagem: string;
  titulo: string;
  descricao: string;
  diaria: number;
  cidade: string;
  estado: string;
}

Home.tsx

import React from "react";
import { Casa } from "../../backend/entidades/casas";

class criarCards extends React.Component<Casa, any> {
  constructor(props: Casa) {
    super(props);

    this.state = {
      casas: [],
      dadosCarregados: false,
    };
  }

  componentDidMount() {
    fetch("http://localhost:4000/casas")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          casas: json,
          dadosCarregados: true,
        });
      });
  }
  render() {
    const { dadosCarregados, casas } = this.state;
    if (!dadosCarregados) {
      return <h1>Carregando...</h1>;
    }

    return (
      <div className="App">
        <h1>Hospedagens</h1>{" "}
        {casas.map((casa: any) => (
          <ol key={casa.id}>
            Título da casa: {casa.titulo}, Descrição: {casa.descricao}, Preço da diária: {casa.diaria}
          </ol>
        ))}
      </div>
    );
  }
}

export default criarCards;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';
import Home from './Home';
import Sobre from "./Sobre";
import { AdicionarHospedagem } from './AdicionarHospedagem';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} >
      <Route path="/" element={<Home />} />
        <Route path="sobre" element={<Sobre />} />
        <Route path="adicionar" element={<AdicionarHospedagem />} />
      </Route>
    </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

I looked here on the forum for some people who were having the same problem, but they had forgotten to pass the interface in the props, and as shown in the code above, it was passed in the class parameters

The error is happening in the index.tsx file

Pyxel Codes Pyxel Codes · Accepted Answer · 2021-11-12T20:57:03

type {} means you passed in an empty object

type Casa is expecting 6 properties which you didnt provide

you should try passing in the required parameters

<Home id="" imagem="" titulo=""... />

where you replace "" by the actual value you want

Type '{}' is missing the following properties from type 'Readonly'

1 Answers