expected corresponding jsx closing tag error in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript angular css html

expected corresponding jsx closing tag error in react

author：jiyik last updated：2025/03/05 views：

react.js error “ expected corresponding jsx closing tag ” appears when we forget to close a tag in the jsx code . to fix the error, use self-closing tags like and make sure the order of opening and closing tags in the jsx code is correct.

here is an example that produces the above error

export default functionapp() {
  // ⛔️ expected corresponding jsx closing tag for .
  return (
      <div><h1>hello worldh1><inputid="icon_prefix"type="text"class="validate">div>
  )
}

the problem in our example is that we forgot to close the tag of the input element.

we can use self-closing tags to fix the error.

export default functionapp() {
  return (
    <div><h1>hello worldh1><inputid="icon_prefix"type="text"class="validate" />div>
  );
}

we used a self-closing tag for the input element. so instead of using , which caused the error , we used .

this error is also commonly caused by img elements. make sure to always close our img tags as .

the same is true for the and

tags.

we always have to close the tag or use a self-closing tag, otherwise react expects us to pass the children prop to the component.

it can also cause errors when we open and close tags in an incorrect order.

export default functionapp() {
  // ⛔️ expected corresponding jsx closing tag for .
  return (
    <div><h1>hello world
      <span>hello 123h1>span>div>
  );
}

the problem in the code snippet above is that h1the

tag opens, then spanthe

element begins, and then h1the

tag spancloses before the

element.

to fix the error in this case, we must first close spanthe tag.

export default functionapp() {
  return (
    <div><h1>
        hello world
        <span>hello 123span>h1>div>
  );
}

always use closing or self-closing tags because if react finds only an opening tag, then it expects us to childrenpass the attribute to the element and then close it.

previous：type usestate as array of objects in react typescript

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

type usestate as array of objects in react typescript

publish date：2025/03/05 views：158 category：react

要在 react 中将 usestate 钩子键入为对象数组，请使用钩子的泛型，例如 const [employees, setemployees] = usestate{salary: number; name: string}[]([]) 。状态变量可以初始化为一个空数组，并且只接受指

publish date：2025/03/05 views：144 category：react

在 react 中处理 select 元素上的 onchange 事件：在 select 元素上设置 onchange 属性。将所选选项的值保存在状态变量中。每次用户更改所选选项时，更新状态变量。 import {usestate} from react

publish date：2025/03/05 views：73 category：react

在 react 中从数组中为 select 生成 option 标签：使用 map() 方法迭代数组。在每次迭代中，返回一个选项元素。将唯一的关键属性传递给每个选项元素。 const app = () = { const arr = [ { value

publish date：2025/03/05 views：97 category：react

在 react 中使用 onchange 修改文本区域的值：将 onchange 属性添加到文本区域，将其设置为一个函数。通过 usestate 钩子将文本区域的值存储在状态中。每次用户在文本区域中键入时更新状

publish date：2025/03/05 views：165 category：react

在 react 中从父组件调用子函数：将 child 组件包装在 forwardref 中。在 child 中使用 useimperativehandle 钩子来为 child 添加一个函数。使用 ref 从 parent 调用 child 的函数，例如 childref.current.

publish date：2025/03/05 views：95 category：react

在 react 的函数组件中使用 addeventlistener 方法：在元素上设置 ref 属性。使用 ref 上的当前属性来访问元素。在 useeffect 挂钩中添加事件侦听器。 import {useref, useeffect} from react ; const app

publish date：2025/03/05 views：171 category：react

react-hooks/exhaustive-deps规则会在效果钩子中缺少依赖项时向我们发出警告。要消除警告，请将函数或变量声明移到 useeffect 钩子内，记住每次渲染时更改的数组和对象或禁用规则。这是警

publish date：2025/03/05 views：71 category：react

在 react 中设置带有内联样式的背景图片：在 img 元素上设置 style 属性。在样式对象中设置 backgroundcolor 属性。例如， backgroundimage: 。 // ?️ import the image import m

publish date：2025/03/05 views：156 category：react

在 react 中将数据从子组件传递到父组件：将函数作为 prop 传递给 child 组件。调用 child 组件中的函数并将数据作为参数传递。访问 parent 函数中的数据。 import {usestate} from react ; funct

expected corresponding jsx closing tag error in react-ag捕鱼王app官网