Function Component HTML about closing tag in React-CodePudding

Since I've learned React, I have usually used class component. However, as you know, a few days ago, REACT update the' react-route-dom:6 version', I think they prefer using function components rather than a class components.

Anyway, I practice the function component these days and I have a problem with closing tag. I am sorry if I asking so basic question. I am just getting learning it. According to this code,

<div>
    <columnTop>
        <titleBox>
            <a>Jordan</a>
            <p>Jordna 1 Retro High OG Bordeaux</p>
            <p>조던 1 레트로 하이 OG 보르도</p>
        </titleBox>
        <figureWrap>
            <detailSize>
                <title>사이즈</title>
                <showAllSizes>
                    <a>모든 사이즈</a>
                </showAllSizes>
            </detailSize>
            <detailPrice >
                <title>최근 거래가</title>
                <priceInfo>
                    <amount>248,000</amount>
                    <fluctuation>6000원(-2.4%)</fluctuation>
                </priceInfo>
            <detailPrice />
        </figureWrap>
        <productTile />
        <buttonWrapper />
    </columnTop>
</div>

The terminal said, "detailPrice should be self-closig tag" I am not sure which part do I missing. I tried to make this one

I will leave the whole code just in case.

import React from 'react';

export default function ProductDetail() {
  return (
    <detailProductWrapper>
      <leftSide />
      <rightSide>
        <div>
          <columnTop>
            <titleBox>
              <a>Jordan</a>
              <p>Jordna 1 Retro High OG Bordeaux</p>
              <p>조던 1 레트로 하이 OG 보르도</p>
            </titleBox>
            <figureWrap>
              <detailSize>
                <title>사이즈</title>
                <showAllSizes>
                  <a>모든 사이즈</a>
                </showAllSizes>
              </detailSize>
              <detailPrice >
                <title>최근 거래가</title>
                <priceInfo>
                  <amount>248,000</amount>
                  <fluctuation>6000원(-2.4%)</fluctuation>
                </priceInfo>
              <detailPrice />
            </figureWrap>
            <productTile />
            <buttonWrapper />
          </columnTop>
        </div>
        <productInfo>
          <productInfoTitle />
          <detailProductWrapper />
        </productInfo>
        <marketPrice>
          <marketPriceTitle />
          <salesGraphWrapper />
          <bidsWrapper />
        </marketPrice>
      </rightSide>
    </detailProductWrapper>
  );
}

It would be really appreciate your help!

CodePudding user response：

I think it should be:

   <detailPrice >
      <title>최근 거래가</title>
      <priceInfo>
        <amount>248,000</amount>
        <fluctuation>6000원(-2.4%)</fluctuation>
      </priceInfo>
   </detailPrice >

if title and priceInfo are supposed to be inside detailPrice.

Or if detailPrice is not a container for title & priceInfo you should go with self-closing both, not only the first one:

 <detailPrice /> <-- self closing tag
    <title>최근 거래가</title>
    <priceInfo>
       <amount>248,000</amount>
       <fluctuation>6000원(-2.4%)</fluctuation>
    </priceInfo>
 <detailPrice /> <-- self closing tag

CodePudding user response：

You have an incorrect tag ending. It should be </detailPrice> instead of <detailPrice />

Try this way:

<detailPrice>
    <title>최근 거래가</title>
    <priceInfo>
        <amount>248,000</amount>
        <fluctuation>6000원(-2.4%)</fluctuation>
    </priceInfo>
</detailPrice >