I am seeking guidance on how to properly display the html iframe element within rich text formatting

Currently, I am going through the Strapi tutorial that covers the process of creating a blog using Nextjs with Strapi. If you are interested, you can find the tutorial here

One important point mentioned in the tutorial is that a markdown package needs to be downloaded. You can access it by following this link: https://i.stack.imgur.com/1VGuS.png

The markdown format is utilized in this section:
https://i.stack.imgur.com/hCYCT.png

The outcome of incorporating markdown can be seen here:
https://i.stack.imgur.com/xMdrz.png After taking a screenshot, it became evident that the iframe element was not displaying correctly. In my opinion, using a tool that supports mdx might resolve the issue, but I am unsure of the necessary steps.

reactjsnext.jsmarkdownstrapimdxjs

Answer №1

One way to handle this is by utilizing the rehype-raw package

  1. To get started, you can install rehype-raw using npm

  2. <ReactMarkdown rehypePlugins={[rehypeRaw]} children={input} />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging async/await within a React functional component

Just getting started with React for a new project and facing challenges incorporating async/await functionality into one of my components. I've created an asynchronous function called fetchKey to retrieve an access key from an API served via AWS API ...

javascriptreactjsasync-awaitmaterial-uireact-functional-component

How can I effectively test a method within a React component using Jest and Typescript?

When working on .tsx components using Typescript and React, I want to write unit tests for the methods within my React component. For example: export default class SomeComponent extends React.Component<undefined, SomeComponentState> { someMetho ...

reactjstypescriptjestjs

Unable to pass on error from Express server to React client app

Background Overview In my project, I've implemented a React component named 'Register.jsx' where users can input their desired username and password. Upon clicking the submit button, this information is transmitted to an Express backend whi ...

javascriptreactjsexpress

Triggering multiple onClick events in React / Material-UI when used within a data.map() loop

My English may not be perfect. {data.sort(getSorting(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map(n => { {/*........*/} <Button onClick={this.handleLsClick}> Open Menu < ...

javascriptreactjsloopsmaterial-ui

Tips for making a single API call using React Query

I am building a visitor call system using React Query. I have a call button and I only want to make an API call when the button is pressed. However, the API keeps getting called every time the component is rendered. How can I prevent the component from m ...

reactjsreact-query

When I attempted to run `npm start`, an error with status code 1 was thrown,

Upon running npm start, the following error is displayed: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4c5d5d6d1d031c031d">[email protected]</a> start /Users/user/Desktop/react-tutorial > react-script ...

javascriptreactjsnpm

"Integrating Google Maps and Autocomplete feature on a single NextJS page: A step-by-step

Below is a snippet of the code I'm working on: Page import Map from "@/components/Map"; import { grayMid } from "@/theme/colors"; import { GoogleCoords } from "@/typings"; import { LegacyRef, useRef, useState } from &quo ...

reactjsgoogle-mapsnext.jsgoogle-maps-api-3

Unleashing the Power of NPM Build with Secret Integration

When working with NEXTJS, I found that using environment variables for the build process is necessary, but not afterwards. Initially, I used ARQ, but found it to be less secure (ephemeral). However, I am having trouble understanding the documentation on ma ...

dockerdockerfilenext.js

How can we update API requests based on dropdown selection changes in Next.js?

Currently, I am working on a calendar project using Next.js. The calendar needs to change based on the selected country and year, for which I am utilizing a holidays API. The API URL includes parameters for country and year (https://localhost:5001//holiday ...

next.jsgetstaticpropsgetserversideprops

Revamp MUI class names with React Material UI's innovative randomization and elimination

Can names be randomized or Mui-classNames removed? https://i.stack.imgur.com/J6A9V.png Similar to the image displayed? (All CSS class names would be jssXXX) Appreciate your assistance. ...

javascriptreactjsmaterial-ui

Ways to ensure the axios call is completed before proceeding with the codeexecution

I need to use axios to send a request and retrieve some data that I want to pass as a prop to a React Component. Here's my render function: render() { boards = this.fetchBoardList(); return ( <div className="app-wrapper"> ...

javascriptreactjsasync-awaitpromise

What is the best way to handle passing the "img" object to an onload event handler in ReactJS JSX?

I am currently working on an img element that I want to be able to listen for the onLoad event. However, I also need access to the image object itself in order to check properties like width and height. Since these images are generated dynamically, I won&a ...

javascriptreactjs

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data ...

javascriptreactjsnext.js

Steps to completely eliminate all elements from an object using specific keys

I have been pondering the most efficient method to delete all elements of an object through an onClick function. The goal is for the handler to remove all elements. Despite attempts with methods like the delete keyword and filtering, clicking the clear all ...

javascriptreactjsobjectfilterkey

Tips for using props as a className with makeStyles

Exploring the world of React for the first time, I am embarking on creating a website using this technology. Within a functional component, I have arranged an image and text content in a 6-column grid layout. The challenge I face is swapping these six colu ...

reactjsmaterial-uicomponentsmakestyles

Avoiding the unnecessary re-rendering of input fields in React when their values change

I am developing a form that is dynamically generated using JSON data fetched from an API. The JSON structure includes information about the input elements to be rendered, such as name, type, placeholder, validation rules, and more. { name: { elemen ...

javascriptreactjsoptimizationredux

Tips for utilizing a single Laravel instance for hosting two separate React projects

Having two react projects created using the create-react-app kit both utilizing the same database and shared models. For the backend, I have implemented a Laravel project with the React projects placed in its public directory: --Laravel project |-- app ...

phpreactjslaravel-5laravel-5.5

What are the steps for setting up PancakeSwap V2 on a testnet environment?

I am currently testing the Pancakeswap v2 frontend repository on my local host, but I am encountering an issue when trying to switch to the testnet. (https://github.com/pancakeswap/pancake-frontend) I receive an error message when I change the value of NEX ...

reactjsnext.jsbinance-smart-chainbscpancakeswap

Tips for concealing or revealing passwords in Material UI

One of the features I want to incorporate into my App is the ability to toggle between showing and hiding the password for the Login page. This is the code snippet for the TextField element: <TextField className={classes.textf} variant="standa ...

reactjsreact-nativematerial-ui

An issue has arisen with integrating NextAuth and Next.js into a dynamic route, such as the following: "http://localhost:3000/profile/%5B%5D"

I'm in the process of developing a website with Next.js, using the Next.js App router. I've successfully implemented NextAuth for managing logins, and so far, user creation and login functions are operating smoothly. However, I've run into ...

next.jsfetchprismanext-authnextjs-dynamic-routing