How to type an object that contains a React component as a property and also that component's props as another property?

Asked
Active3 hr before
Viewed126 times

11 Answers

containspropscomponentpropertyobjectreact
90%

Passing Functions to Components,This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.,Uncontrolled Components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
load more v
88%

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.,You can define default values for your props by assigning to the special defaultProps property:,With PropTypes.element you can specify that only a single child can be passed to a component as children.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
load more v
72%

Stack Overflow en español,Using this.props.children is the idiomatic way to pass instantiated components to a react component, Meta Stack Overflow

Using this.props.children is the idiomatic way to pass instantiated components to a react component

const Label = props => <span>{props.children}</span>
const Tab = props => <div>{props.children}</div>
const Page = () => <Tab><Label>Foo</Label></Tab>

When you pass a component as a parameter directly, you pass it uninstantiated and instantiate it by retrieving it from the props. This is an idiomatic way of passing down component classes which will then be instantiated by the components down the tree (e.g. if a component uses custom styles on a tag, but it wants to let the consumer choose whether that tag is a div or span):

const Label = props => <span>{props.children}</span>
const Button = props => {
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return <button><Inner>Foo</Inner></button>
}
const Page = () => <Button inner={Label}/>

If what you want to do is to pass a children-like parameter as a prop, you can do that:

const Label = props => <span>{props.content}</span>
const Tab = props => <div>{props.content}</div>
const Page = () => <Tab content={<Label content='Foo' />} />
load more v
65%

With newer TS versions you can use lookup types.

type ViewProps = View['props']

The React typedefs ship with an utility to extract the type of the props from any component.

type ViewProps = React.ComponentProps<typeof View>

   type InputProps = React.ComponentProps<'input'>
load more v
75%

Thank you for proving detail information for How to pass props to components in React. this steps is really helpful on my current project.,With the propTypes property declared, the Greeting component will throw a warning to the console when its props aren’t passing propTypes validation., Kirti says: July 26, 2019 at 7:48 am Thank you for proving detail information for How to pass props to components in React. this steps is really helpful on my current project.

Props stands for “properties,” and they are used in a React application to send data from one React component to another React component. Let’s take a look at the example code below. Here we have a single React component rendering a string:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  render(){
    return <div>Hello, World!</div>
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
load more v
40%

Another important concept of components is how they communicate. React has a special object called a prop (stands for property) which we use to transport data from one component to another.,But be careful – props only transport data in a one-way flow (only from parent to child components). It is not possible with props to pass data from child to parent, or to components at the same level.,After getting used to the JSX syntax, the next thing to understand is the component-based structure of React.

The first thing you'll realize after installing your first React project is that a JavaScript function returns some HTML code:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}
load more v
22%

As you can see, in the Greeting component the props are destructured but with a rest assignment which is called other in this case. So you have the subject prop but also the other prop which is essentially just an object with all the remaining properties (in this case only the description). Now you can spread the rest of the props to the Description component, because all the relevant props for the other components (here the Title component) were separated from it.,Since you will find always the props in the function signature, which most of the time is only the container object of your data, but not the data to be used, you can destructure the props early in the function signature. One would call it React props destructuring:,Note: It is important to note that is could lead to performance issues because every time the component renders a new object is created again. But it can be a premature optimization as well when learning only about React.

Normally you start out with React’s JSX syntax for rendering something to the browser when learning about React. Basically, JSX mixes HTML with JavaScript to get the best of both worlds.

import React, { Component } from 'react';class App extends Component {  render() {    const greeting = 'Welcome to React';    return (      <div>        <h1>{greeting}</h1>      </div>    );  }}export default App;
load more v
60%

React is a component-based library where each application can be divided into components that act as single, generic units in order to serve any specific functionality.,React is a JavaScript-based library used to create an excellent user interface, and by using it, we can create different UI components.,In this guide, we have learned the backbone of any React app, which is props. We have also discussed creating and consuming the props from the parent component to the child component.

1import React, { Component } from "react";
2import { render } from "react-dom";
3import "./style.css";
4import DemoComponent from "./DemoComponent";
5
6class App extends Component {
7  constructor() {
8    super();
9    this.state = {
10    };
11  }
12
13  render() {
14    return (
15      <div>
16        <DemoComponent
17          name={"Test"}
18          age={25}
19          email={"[email protected]"}
20          salary={66.5}
21        />
22      </div>
23    );
24  }
25}
26
27render(<App />, document.getElementById("root"));
load more v
48%

This presents an interesting challenge with TypeScript as we need to effectively allow strongly-typed props passing between these components.,In this guide, you will learn how to compose React.js components using the compile-to-JavaScript language, TypeScript. Using TypeScript with React allows you to develop strongly-typed components that have identifiable props and state objects, which will ensure any usages of your components are type checked by the compiler.,The guide assumes you are already familiar with React and TypeScript as separate technologies and how to statically type React components with TypeScript.

1n pm install @types / react--dev
load more v
23%

Now that the project is set up, you can create your first component.,You can also use a property on the prop object using dot notation. As an example, you could create an <h2> element like this: <h2>{props.title}</h2>. The advantage of destructring is that you can collect unused props and use the object rest operator., How To Create React Elements with JSX

In this tutorial, you’ll create custom components by passing props to your component. Props are arguments that you provide to a JSX element. They look like standard HTML props, but they aren’t predefined and can have many different JavaScript data types including numbers, strings, functions, arrays, and even other React components. Your custom components can use props to display data or use the data to make the components interactive. Props are a key part of creating components that are adaptable to different situations, and learning about them will give you the tools to develop custom components that can handle unique situations.

/n

After adding props to your component, you will use PropTypes to define the type of data you expect a component to receive. PropTypes are a simple type system to check that data matches the expected types during runtime. They serve as both documentation and an error checker that will help keep your application predictable as it scales.

PropTypes

In this tutorial, you’ll create custom components by passing props to your component. Props are arguments that you provide to a JSX element. They look like standard HTML props, but they aren’t predefined and can have many different JavaScript data types including numbers, strings, functions, arrays, and even other React components. Your custom components can use props to display data or use the data to make the components interactive. Props are a key part of creating components that are adaptable to different situations, and learning about them will give you the tools to develop custom components that can handle unique situations.

/n

After adding props to your component, you will use PropTypes to define the type of data you expect a component to receive. PropTypes are a simple type system to check that data matches the expected types during runtime. They serve as both documentation and an error checker that will help keep your application predictable as it scales.

PropTypes
load more v
90%

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.,Most of the time you should explicitly pass the properties down. This ensures that you only expose a subset of the inner API, one that you know will work., Component API

<Component {...this.props} more="values" />
load more v

Other "contains-props" queries related to "How to type an object that contains a React component as a property and also that component's props as another property?"