React ile uygulama geliştirirken elimizdeki dataya göre farklı html tagleri kullanmak isteyebiliriz. Bu durumda html tagini dinamik olarak tanımlamak bizi kod tekrarından kurtaracaktır.

Bir örnekle açıklamaya çalışalım. Kullanıcının veri girebileceği bir alana ihtiyacımız olduğunu ve kullanacağımız tag'in karakter sınırına göre değişeceğini düşünelim. <textarea> veya <ìnput> taglerini kullanabiliriz.

return this.props.maxLength > 250 ? (
  <textarea
    name='description'
    className='description-input'
    onChange={this.onChange}
    maxLength={this.props.maxLength}
  />
) : (
  <input name='description' className='description-input' onChange={this.onChange} maxLength={this.props.maxLength} />
)

Bu senaryoyu yukarıdaki gibi koda dökmek mümkün. Gördüğünüz gibi çok fazla kod tekrarı içeriyor. Dinamik tag kullanarak kodumuzu refactor etmeye geçmeden önce farklı yöntemle sorunu çözmeye çalışalım.

const inputProps = {
  name: 'description',
  className: 'description-input',
  onChange: this.onChange,
  maxLength: this.props.maxLength
}

return this.props.maxLength > 250 ? <textarea {...inputProps} /> : <input {...inputProps} />

Kodumuzu daha düzgün hale getirmeyi başardık. Fakat hala çok iyi bir çözüm olduğunu düşünmüyorum 🧐. Dilerseniz dinamik tag kullanarak kodumuzu güncelleyelim.

const DynamicInput = this.props.maxLength > 250 ? 'textarea' : 'input'

return (
  <DynamicInput
    name='description'
    className='description-input'
    onChange={this.onChange}
    maxLength={this.props.maxLength}
  />
)

Bu kadar basit 😀. Hem kod tekrarını önlemiş olduk hem de daha okunabilir bir koda sahip olduk.