Hi all - thanks for any help on this. I have a simple component rendering one thing right now (using react-bootstrap’s Panel component):
import React, { Component, PropTypes } from 'react';
import { Panel } from 'react-bootstrap';
export default class Reference extends Component {
renderFullLine() {
return (<p>sup<strong> player</strong> sucka</p>)
}
render() {
// const line = (<p>sup<strong> player</strong> sucka</p>);
return (
<Panel className="ref-panel" header={this.renderFullLine.bind(this)} collapsible>
Panel content
</Panel>
);
}
}
Reference.propTypes = {
reference: PropTypes.object.isRequired,
};
You’ll notice in the Panel component a prop called “header” where I’m calling the function renderFullLine(). This throws an error:
Warning: Failed propType: Invalid prop
headersupplied to
Panel, expected a ReactNode. Check the render method of
Reference.
But if I uncomment the line just before the render method’s return value (const line = …)
and pass it the same thing from inside the render method, it works fine.
render() {
const line = (<p>sup<strong> player</strong> sucka</p>);
return (
<Panel className="ref-panel" header={line} collapsible>
Panel content
</Panel>
);
}
Can someone explain what’s going on? I want to be able to take a string and style a single word before sending it back to the prop.