1

I did a lot of research for this error but I find mostly examples with Class Components getting the error, and I'm using Functional components!! This is a requirement for the React Course I'm doing, we are working on the first project and another requirement is to still don't use -create-react-App :(

So, they gave us React and Babel scripts, here are my HTML scripts:

   <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>    
    <script type="text/babel" src="./scripts/app.js"></script>   

Plis don't laugh!!!

The code that is nor working is:

function App() {

const today = new Date()
console.log(today);

let filters = {
  dateFrom: today,
  // dateTo: new Date(today.valueOf() + 86400000),
  // country: "",
  // price: 0,
  // rooms: 0,
};

return (
  <div>
    <Hero filters={filters} />
  </div>
);
}

function Hero({ filters }) {
return (
  <section className="hero is-primary">
    <div className="hero-body">
      <div className="container">
        <h1 className="title">Hotels</h1>
        <h2 className="subtitle">
          from <strong>{filters.dateFrom}</strong> to
          <strong>dddd, DD of mmmm de AAAA</strong>
        </h2>
      </div>
    </div>
  </section>
);

ReactDOM.render(<App />, document.getElementById("app"));

}

Problem is dateFrom: today, if I send there a simple string, it works perfectly, but I need to send current's date inside the object, this is a simple app to look for hotels. The structure of this code (using the const filters object and the functional components) was given to me in classes and I'm supposed to make it work :(

I was following the example of this link: http://learningprogramming.net/modern-web/react-functional-components/pass-object-to-props-in-react-functional-components/ but it uses create-react-app...

Error that i get is: Uncaught Error: Objects are not valid as a React child (found: Tue Apr 21 2020 11:08:12 GMT-0300 (Argentina Standard Time)). If you meant to render a collection of children, use an array instead.

Thank you very much!!!!!

1 Answer 1

2

filters.dateFrom is an object, and as your error message explains, objects can't be directly rendered as React children.

Date objects can be rendered as strings though. The simplest case would be something like the following.

<strong>{filters.dateFrom.toString()}</strong>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.