Joshua Rajandiran Joshua Rajandiran - 4 months ago 23
React JSX Question

How to properly write a React Class Component that can receive props?

I know how to receive props in presentational components but currently I need to also use functions which have logic therefore I'm needed to change my component into a Class Component right now, I don't know why I'm not able to receive the props.

Here is a part of my component:

class MemberInfoSubPage extends React.Component {
constructor(props) {
super(props);
this.state = {

};
this.renderRow = this.renderRow.bind(this);
}


As you can see, I'm using ES6 & I'm trying to render rows from a map but for now I'm just trying to receive props. Is this code provided correct? I mean the usual syntax.

PS: For additional info, I'm receiving 'props' is not defined. So yea, I'm not receiving the props after changing my component. Previously I was able to receive the props.

EDIT:

import React, {PropTypes} from 'react';
import ons from 'onsenui';
import * as Ons from 'react-onsenui';

class MemberInfoSubPage extends React.Component {
//const result = FlightApi.getAllFlightList();
constructor(props) {
super(props);
this.state = {

};
// this.stateToEntry = this.stateToEntry.bind(this);
this.renderRow = this.renderRow.bind(this);
}

renderRow(row,index) {
const x = 40 + Math.round(5 * (Math.random() - 0.5)),
y = 40 + Math.round(5 * (Math.random() - 0.5));

const names = ['Max', 'Chloe', 'Bella', 'Oliver', 'Tiger', 'Lucy', 'Shadow', 'Angel'];
const name = names[Math.floor(names.length * Math.random())];

return (
<Ons.ListItem key={index}>
<div className='left'>
<img src={`http://placekitten.com/g/${x}/${y}`} className='list__item__thumbnail' />
</div>
<div className='center'>
{name}
</div>
</Ons.ListItem>
);
}

render() {
if (props['index'] == 0) {
return (
<div className="memberInfoSubPage">
<div className="memberInfoSubPage-row1">

<span>{props['data-user'].id}</span>

<table border={1} className="memberInfoSubPage-Table">
<tr>
<th style={{color: 'grey'}}>Rank</th>
<th style={{color: 'grey'}}>Country</th>
</tr>
<tr>
<td>{props['data-user'].rank}</td>
<td>{props['data-user'].country}</td>
</tr>
</table>
</div>
<div>
<div className="memberInfoSubPage2-Summary-Title">Placement Performance Summary</div>
<table border={1} className="memberInfoSubPage-Table2">
<tr>
<td>L</td>
<td>R</td>
</tr>
<tr>
<td>{props['data-user'].placementPerformanceSummary.L}</td>
<td>{props['data-user'].placementPerformanceSummary.R}</td>
</tr>
</table>
</div>
<div>
<div className="memberInfoSubPage2-Summary-Title">Today Detail</div>
<table border={1} className="memberInfoSubPage-Table3">
<tr>
<td>L</td>
<td>R</td>
</tr>
<tr>
<td>{props['data-user'].todayDetail.L}</td>
<td>{props['data-user'].todayDetail.R}</td>
</tr>
</table>
</div>
<div> <table border={1} className="memberInfoSubPage-Table3">
<tr><th style={{color: 'grey'}}>Next Level Upgrade</th></tr>
<tr>
<td>{props['data-user'].nextLevelUpgrade}</td>
</tr>
</table>
</div>

<Ons.Button style={{margin: '6px'}}>Instant Upgrade</Ons.Button>


<div>
<div className="memberInfoSubPage2-Summary-Title" style={{color: 'grey'}}>Conversion Share Platform Portfolio</div>
<table border={1} className="memberInfoSubPage-Table3">
<tr style={{color: 'grey'}}>
<th>Market($)</th>
<th>Unit</th>
<th>Tradable Unit</th>
</tr>
<tr>
<td>{props['data-user'].market}</td>
<td>{props['data-user'].unit}</td>
<td>{props['data-user'].tradableUnit}</td>
</tr>
</table>
</div>
<div><table border={1} className="memberInfoSubPage-Table3">
<tr style={{color: 'grey'}}>
<th>Lock Units</th>
<th>Avg Price</th>
<th>Last Price</th>
</tr>
<tr>
<td>{props['data-user'].lockUnits}</td>
<td>{props['data-user'].avgPrice}</td>
<td>{props['data-user'].lastPrice}</td>
</tr>
</table>
</div>
</div>
);
}
else if (props['index'] == 1) {
return (
<Ons.List
dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
renderRow={this.renderRow}
renderHeader={() => <Ons.ListHeader>Summary</Ons.ListHeader>}/>
/*<div className="memberInfoSubPage2-Summary-Title">Summary</div>
<table className="memberInfoSubPage2-Summary-Table">
<tr><td>Credit</td><td>{props['data-user'].summary.credit}</td></tr>
<tr><td>Register</td><td>{props['data-user'].summary.register}</td></tr>
<tr><td>CP(S)</td><td>{props['data-user'].summary.cpS}</td></tr>
<tr><td>CP(0)</td><td>{props['data-user'].summary.cp0}</td></tr>
<tr><td>AP</td><td>{props['data-user'].summary.ap}</td></tr>
<tr><td>BO Point</td><td>{props['data-user'].summary.boPoint}</td></tr>
<tr><td>Listed Company Fund</td><td>{props['data-user'].summary.listedCompanyFund}</td></tr>
<tr><td>Promo</td><td>{props['data-user'].summary.promo}</td></tr>
<tr><td>TT</td><td>{props['data-user'].summary.tt}</td></tr>
<tr><td>Re-Entry Point</td><td>{props['data-user'].summary.reEntryPoint}</td></tr>
</table>*/
);
}
else {
return (
<p>Not receiving any index. No content can be shown.</p>
);
}
}
};

MemberInfoSubPage.propTypes = {
'data-pageName': PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
'defaultOption': PropTypes.string,
value: PropTypes.string,
'error': PropTypes.string,
'options': PropTypes.arrayOf(PropTypes.object)
};

export default MemberInfoSubPage;


Here is my code, I'm pretty sure I've missed something.
There is still a lot of unrefined code and the function
renderRow
& that
Onsen
list is copy pasted.

sma sma
Answer

props is on the component instance, so you'll need to refer to it as this.props rather than just props in your render function.