javascript - Creating custom components -

i've been trying uitableview equivalent in react-native. screen looks (work in progress):

the code quite primitive @ moment:

class settingsview extends component {   render() {     return(       <view style={styles.container}>         //more view code          //example of cell         <touchablehighlight style={styles.tableviewcell}>           <text style={styles.celllabel}>log out</text>         </touchablehighlight>       </view>     );   } } 

it works fine, i've been trying create accessory - > indicator - cells. whilst doing that, stumbled upon way create custom component via code:

class tableviewcell extends component {   render() {     return (       <touchablehighlight style={styles.tableviewcell}>         <text style={styles.celllabel}>log out</text>       </touchablehighlight>     );   } } 

next, replaced initial block of code , came out this:

class settingsview extends component {   render() {     return(       <view style={styles.container}>         //more view code          //example of cell         //replaces previous block of touchablehighlight         <tableviewcell/>       </view>     );   } } 

wow. native swift developer has barely experience html , javascript, amazing. went on quest in attempt find out how might make reusable. currently, tableviewcell hardcoded have text "log out". ideally want able supply text argument constructor. got stuck. here's i've tried far:

use getattribute see if extract attribute pass in whilst declaring tableviewcell tag.

//when declaring cell on screen's render <tableviewcell titletext="about"/>  //tableviewcell component render() {   return(     <touchablehighlight ...>       <text>{this.getattribute("titletext")}</text>     </touchablehighlight>   ); } 

i couldn't reference titletext i've declared part of tag. ideas?

i wrong, i'm pretty sure need. can pass properties components , receive them this.props:

// when declaring cell on screen's render <tableviewcell titletext="about"/>  // tableviewcell component render() {   return(     <touchablehighlight ...>       <text>{this.props.titletext}</text>     </touchablehighlight>   ); }