CODEWITHSUNDEEP
reactjsnext.js
LayTexas
LayTexas

Reputation: 645

How to pass properties, using next JS?

I need to pass a property when I invoke a component, but it's not working. I'm starting with next JS and this is confusing to me.

//Component

const Container: React.FC = (props) => (
  <section className="container-red">
    <h1>{props.title}</h1>
  </section>
);

export default Container;



//----------------------

import Container from "../../components/Container";

const FaqCustomer: React.FC = () => (
  <div>
    <Container title="Title Page" />
  </div>
);

Upvotes: 0

Views: 1941

Answers (1)

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

You need to define the props and its type in Container component.

Make an interface and assign the title and its type like,

interface IContainerProps {
   title: string;
}

Then use the interface like,

React.FC<IContainerProps> = props => ( ... )

And the code in container looks like,

components/container.tsx

import * as React from "react";

interface IContainerProps {
  title: string;
}

const Container: React.FC<IContainerProps> = props => (
  <section className="container-red">
    <h1>{props.title}</h1>
  </section>
);

export default Container;

Working Sandbox

Upvotes: 2

Related Questions