React’ı yeni yeni öğreniyorum. Öğrenirken en çok başlıkta yazdığım hatayla karşılaştım. Kendime ve size not düşerek aklımızın bir kenarında durmasını sağlamak için böyle bir not tutayım dedim.
import React, { Component } from 'react'
class BasitOrnek extends Component {
render() {
return (
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
)
}
}
şeklinde return içinde iki elemanlı tanımlama yaptığımızda React
…ContentDetail.jsx: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>? (72:16)
Yukarıdaki hatayı veriyor. Aslında hatada ne yapmamız gerektiğini de söylüyor. React jsx içinde return içinde birden fazla öge dönmeye izin vermiyor. Döneceksen bir tek sen dön diyor :)
React eğitim videolarını izlerken bunu belirtmişti eleman ama unutuyor insan. Çözüm bu elemanları saran kapsayıcı bir <div> tanımlamak.
import React, { Component } from 'react'
class BasitOrnek extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
React v16.2 ile birlikte daha da basit bir çözüm gelmiş.
import React, { Component } from 'react'
class BasitOrnek extends Component {
render() {
return (
<>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</>
)
}
}
Sadece <> ve </> ile daha basit kullanımı var. Bu kullanım için Babel 7+ gerekiyormuş.
Kaynaklar
- https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html
- https://medium.com/@muratdogan/react-v16-2-0-ile-iyile%C5%9Ftirilen-%C3%A7ok-k%C4%B1ymetli-%C3%B6zellik-fragments-7a757094eafe
- https://flaviocopes.com/react-fragment/
- https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag