Error: element is not assignable to type string in react

Question

The output that I was getting is with html tags; hence I used dangerouslySetInnerHTML to avoid that after which I am getting the error "Type '{ contents: Element; }' is not assignable to type 'string'."

My react code is as follows:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface FetchImageDataState {
imageList: ImageData[];
loading: boolean;
}

export class OurTeam extends React.Component<RouteComponentProps<{}>, FetchImageDataState> {
constructor() {
    super();
    this.state = { imageList: [], loading: true }; //initialize to default

    fetch('api/Home/ourTeam')
        .then(response => response.json() as Promise<ImageData[]>)
        .then(data => {
            this.setState({ imageList: data, loading: false });
        });
}




public render() {

    let contents = this.state.loading ? <p><em>Loading...</em></p> : this.renderImageTable(this.state.imageList);
    let body = { contents };
    return <div>
        <h1>Team</h1>

        <div dangerouslySetInnerHTML={{ __html: body }} />
            </div>;
}

private renderImageTable(imageList: ImageData[]) {
    return <div className='table'>
        {imageList.map(x =>
            <div key={x.byteData} >{[x]}</div>)
    }</div>;
}

}

export class ImageData {
byteData: string = "";
}

Without usage of dangerouslySetInnerHTML the output of the code was desired text with html tags; and also the image tag was displayed instead of image. The detailed error is: ERROR in [at-loader] ./ClientApp/components/OurTeam.tsx:41:18 TS2322: Type '{ dangerouslySetInnerHTML: { __html: { contents: Element; }; }; }' is not assignable to type 'HTMLProps'. Types of property 'dangerouslySetInnerHTML' are incompatible. Type '{ __html: { contents: Element; }; }' is not assignable to type '{ __html: string; } | undefined'. Type '{ __html: { contents: Element; }; }' is not assignable to type '{ __html: string; }'. Types of property '__html' are incompatible. Type '{ contents: Element; }' is not assignable to type 'string'.

I am new to react, please help to resolve the issue.

Abdullah Abid · Accepted Answer · 2020-05-31 19:35:39Z

0

You seem to be compicating it more than it should be the below code should work fine. use a ternary operator to check if loading is true and render html or JSX based on that and also best to make the call when the component mounts

import React,{Fragment} from 'react';   
export class OurTeam extends Component {
   constructor() {
    super();
    this.state = { imageList: [], loading: true }; //initialize to default

}

  componentDidMount(){
    fetch('api/Home/ourTeam')
        .then(response => response.json())
        .then(data => {
            this.setState({ imageList: data, loading: false });
        }).catch(err=>{
         console.log(err);
         }};
  }


 render() {
    return (<div>
        <h1>Team</h1>
      {this.state.loading ?
        <Fragment>
         <p><em>Loading...</em></p>
        </Fragment>  
        :
       <Fragment>
        <div className='table'>
         this.state.imageList.map(x =>
             <div key={x.byteData} >{[x]}</div>)
           </div>
      </Fragment>});
}}}

edited May 31, 2020 at 19:35

answered May 31, 2020 at 19:20

Abdullah Abid

1,6613 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ashok Over a year ago

Hi Abdullah - I will have to use the class ImageData to fetch data from server side which is Asp.net core..

Abdullah Abid Over a year ago

What seems to be the issue , you can do it the same way you are doing it in OurTeam Class

Ashok Over a year ago

The issue is that the output is with html tags; I want it without tags... for example the output is <strong>xyz</strong> instead of bold value of xyz

Ashok Over a year ago

Earlier I was passing value as string which I changed it to pass Json parameter; but unfortunately cannot pass as separate values for text values and image as the string/json that I am passing is as below. This data is displayed as is like plain text which is the problem.. Please help me if you can guide some alternative solution. <div className='row1'><div className='col-md-3'><a href = '#' className='member-profile'><div className='imgContainer'><img className='image' src='img.jpg' /></div><span>Ashok</span><h4><span>123123123</span> [email protected]</h4></a>.......

Ashok Over a year ago

It is working now; the change I did was : imageList.map((x,index) => <div key={index} dangerouslySetInnerHTML={this.convertToHTML(x)} />) convertToHTML(x) { return { __html: x }; } Thank you Abdullah for your continuous support

|

Collectives™ on Stack Overflow

Error: element is not assignable to type string in react

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related