I am new to Typescript and working on a project started by someone else. Is this a version issue or some other issue with the code? I am using Node version v14.19.11. Although the application loads but the page doesn't work on edit/click text fields.

Code

import React from "react";
import { Table, Row, Col, Spinner, Button, Card, CardHeader, CardBody, FormGroup, Label, Input, Alert } from "reactstrap";
import Moment from "react-moment";
import { Asset } from "./api/platform-assets-api";
import AttributeEditForm from './forms/AttributeEditForm';
import AttributeListComponent from './AttributeListComponent';

export const AssetDetailComponent = ({ data, handlers, lastActionStatus }) => {
    console.log(data);
    const asset: Asset = data;
    const error = '';
    const addAttrProps = { currentAttrs: asset && asset.details, handleAction: handlers.handleAddAttr };
    const attrListProps = { currentAttrs: asset && asset.details, handleAction: handlers.handleDeleteAttr };
    return (
        <div className="animated fadeIn">
            <Row>
                <Col>{error}</Col>
            </Row>
            <Row>
                <Col></Col>
                <Col>
                </Col>
                <Col>
                    <div className="mb-3 float-right">
                        <Button color="secondary" className="mr-2">
                            <span>
                                <i className={"fa fa-refresh"} />
                            </span>
                        </Button>
                        <Button color={"primary"} onClick={handlers.handleOnboard}>
                            Start onboarding...
            </Button>
                        <Button className="ml-2" color={"primary"} onClick={handlers.handleEdit}>
                            Edit
            </Button>
                        <Button className="ml-2" color={"primary"} onClick={handlers.handleClone}>
                            Clone
            </Button>
                        <Button className="ml-2" color={"primary"} onClick={handlers.handleDelete}>
                            Delete
                        </Button>

                    </div>
                </Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <Card>
                        <CardHeader>
                            <i className="fa fa-info" />
                            <strong>{asset && asset.name}</strong> (Id:{" "}
                            {asset && asset.id})
                        </CardHeader>
                        <CardBody>
                            <Row className="pt-3">
                                <Col
                                    sm={4}
                                    className="border border border-top-0 border-bottom-0 border-left-0"
                                >
                                    <dt>Description</dt>
                                    <dd>
                                        {asset && asset.description}
                                    </dd>
                                </Col>
                                <Col
                                    sm={4}
                                    className="border border border-top-0 border-bottom-0 border-left-0"
                                >
                                    <dt>Active</dt>
                                    <dd>
                                        {asset && asset.status}
                                    </dd>

                                </Col>
                                <Col sm={4}>
                                    <dt>Created</dt>
                                    <dd>
                                        {asset && asset.createdAt}
                                    </dd>
                                    <dt>Updated</dt>
                                    <dd>
                                        {asset && asset.updatedAt}
                                    </dd>
                                </Col>
                            </Row>
                            <Row>
                                <Col sm={12}>
                                    <p>{lastActionStatus}</p>
                                </Col>
                            </Row>
                        </CardBody>
                    </Card>
                </Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <AttributeEditForm {...addAttrProps} />
                </Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <AttributeListComponent {...attrListProps} />
                </Col>
            </Row>
        </div>
    );
};

When I do a yarn start I end up with the below Error however the page loads fine at http://localhost:3000/ although the text-fields are not clickable and data couldn't be entered.

Error Observed

Failed to compile.

/Users/roy.pk/platan-cac/src/platform/AssetDetailComponent.tsx
TypeScript error in /Users/ranopriyo.neogy/platan-cac/src/platform/AssetDetailComponent.tsx(16,14):
'Row' cannot be used as a JSX component.
  Its instance type 'Row' is not a valid JSX element.  TS2786

    14 |     return (
    15 |         <div className="animated fadeIn">
  > 16 |             <Row>
       |              ^
    17 |                 <Col>{error}</Col>
    18 |             </Row>
    19 |             <Row>

CodePudding user response：

Rows should be inside container

<div className="animated fadeIn">
  <Container>
        <Row>
           <Col>.col</Col>
       </Row>
  </Container>

Reactstrap Layout Components

CodePudding user response：

'Container' cannot be used as a JSX component. Its instance type 'Container' is not a valid JSX element.