CODEWITHSUNDEEP
javascriptreactjsecmascript-6
user7597670
user7597670

Reputation:

Showing just the html content of a react component

I have a react component called <Currency /> that takes a currency and value.

So if I did <Currency value={10} currency={"USD"}/> it would return <span>$10.00</span>

I am then using this in a separate component.

    if (amount < limit){

        let value  = <Currency value={this.state.depositLimit} currency={this.state.currency} />;

        return this.setState({
            error:`Minimum limit is ${value}`
        });

    }

This renders Minimum deposit is [object Object] on the screen. Does anyone know how I can just show the content of the component i.e. $10.00

Upvotes: 0

Views: 40

Answers (2)

David L. Walsh
David L. Walsh

Reputation: 24815

I would avoid using JSX outside of a render function. Additionally, avoid putting too much information in your component state. I suggest storing the nature of the error, not necessarily the error message itself.

this.setState({
  minDepositError: true,
});

Instead, use the render function to spell out the error message.

if (this.state.minDepositError) {
  return (
    <div>
      <span>Minimum limit is </span>
      <Currency
        currency={this.state.currency}
        value={this.state.depositLimit}
      />
    </div>
  );
}

Upvotes: 1

An Nguyen
An Nguyen

Reputation: 1478

ReactServer renderToString is what you want.

ReactDOMServer.renderToString(value)

Upvotes: 0

Related Questions