React.js Blueprint Suggest Props interface is a type definition for the props (short for properties) that a React component expects to receive. It is used to specify the types and the required values for the props that a component will accept. The Props interface is defined as an object type with a set of key-value pairs, where the key is the name of the prop and the value is the type of the prop. It is often used in combination with the React.FC type, which is a generic type that represents a functional component in React.
The Props interface is helpful in documenting the expected props for a component and for type-checking the props to ensure that they are being used correctly. It can also help to catch bugs and prevent type errors during development.
Syntax: The syntax for defining a Props interface in TypeScript is:
interface Props {
[key: string]: any;
}
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app reactblueprint
Step 2: After creating your project folder i.e. reactblueprint, move to it using the following command:
cd reactblueprint
Folder Structure: It will look like the following.
Example 1: In the first example, the component expects to receive three props: a string for the name, a number for the age, and a string for the favoriteColor. Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
File: MyComponent.js
Javascript
import React from 'react'; interface Props { name: string; age: number; favoriteColor: string; } const MyComponent: React.FC<Props> = (props) => { return ( <div> <p>Name: {props.name}</p> <p>Age: {props.age}</p> <p> Favorite Color: {props.favoriteColor} </p> </div> ); } export default MyComponent; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
And this is how you can use this component in another file: In this file, the App component imports MyComponent and renders it with the prop name set to ‘Alice’ , age set to ’20’ and favorite color set to ‘blue’.
File: App.js
Javascript
<MyComponent name="Alice" age={25} favoriteColor="blue" /> |
Output:
Example 2: In the second example, a functional component called MyComponent has a single prop called the message of type string and it is defined in the MyComponentProps interface. Inside the component, it renders the message prop wrapped inside a <p> tag.
File: MyComponent.js
Javascript
import React from 'react'; interface MyComponentProps { message: string; } const MyComponent: React.FC<MyComponentProps> = ({ message }) => { return <p>{message}</p>; }; export default MyComponent; |
And this is how you can use this component in another file: In this file, the App component imports MyComponent and renders it with the prop message set to “Hello, World!”. So the final output will be “Hello, World!” displayed on the screen.
File: App.js
Javascript
import React from 'react'; import MyComponent from './MyComponent'; function App() { return ( <div> <MyComponent message="Hello, World!" /> </div> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#select/suggest.props-interface
