How to pass an image to a TypeScript React component

Question

I have written a React component in TypeScript like this:

const SingleColumn = (image: any, heading: string, para: string) => {return(
  <Col className="col-md-4 my-4">
    <img src={image} alt="" className="w-100"/>
    <h4 className="my-4">{heading}</h4>
    <p>{para}</p>
    <a href="#" className="btn btn-outline-dark btn-md">Our Story</a>
  </Col>
)};

And I am calling this component in my code like this:

import img from '../img/1.jpg';
<Row className="row my-5">
  <SingleColumn image={img1} heading="Amazing.Incredible." para="Use the adjective amazing"/>
</Row>

I have two problems with this code.

The type of the image parameter is any. What should be the right type? How do you find the right type of an HTML element? Is there a way to query it?
I am getting a compilation error saying Tag 'SingleColumn' expects at least '3' arguments, but the JSX factory 'React.createElement' provides at most '2'.

Moh682 · Accepted Answer · 2021-09-10 12:27:04Z

In the context it's being used in the code, the type of image should be a string.
```
<img src={<string>} />
```
Here it is explained in details: <img>: The Image Embed element

You shouldn't pass properties to a component like that. All the properties should be in one object under one object, usually called "props" like so:

const SingleColumn = (props: {
  image: string;
  heading: string;
  para: string;
}) => (
  <div className="col-md-4 my-4">
    <Col className="col-md-4 my-4">
      <img src={image} alt="" className="w-100" />
      <h4 className="my-4">{heading}</h4>
      <p>{para}</p>
      <a href="#" className="btn btn-outline-dark btn-md">
        Our Story
      </a>
    </Col>
  </div>
);

Or you can do destructuring like

const SingleColumn = ({ image, heading, para }) => (
  <div className="col-md-4 my-4">
    <Col className="col-md-4 my-4">
      <img src={image} alt="" className="w-100" />
...

I would highly recommend you to make interfaces like

interface ISingleColumnProps {
  image: any;
  heading: string;
  para: string;
}

const SingleColumn = (props: ISingleColumnProps) => (
...

Components and Props is a great example of how React passes props.

EDIT

Another options is by using React.FC Like the following

interface ISingleColumnProps {
  image: string;
  heading: string;
  para: string;
}
const SingleColumn: React.FC<ISingleColumnProps> = ({image, heading, para}) => (
  <div className="col-md-4 my-4">
    <Col className="col-md-4 my-4">
      <img src={image} alt="" className="w-100" />
      <h4 className="my-4">{heading}</h4>
      <p>{para}</p>
      <a href="#" className="btn btn-outline-dark btn-md">
        Our Story
      </a>
    </Col>
  </div>
);

Collectives™ on Stack Overflow

How to pass an image to a TypeScript React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related