Calling functions in a prop assignment


#1

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 propheadersupplied toPanel, expected a ReactNode. Check the render method ofReference.

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.