read-more-react icon indicating copy to clipboard operation
read-more-react copied to clipboard

dangerouslySetInnerHTML possible?

Open mikexavier opened this issue 4 years ago • 3 comments

Hey, I'm currently pulling text from WordPress via an ACP WYSISYG field. I've been using dangerouslySetInnerHTML to display the text without HTML.

Is there a way to do this while using read-more-react?

Thx

mikexavier avatar Apr 17 '20 21:04 mikexavier

I was looking for the same thing. Any solution for this?

Thanks!

axeligl avatar Jun 13 '20 18:06 axeligl

@axeligl I didn't find a way with read-more-react

mikexavier avatar Jun 15 '20 09:06 mikexavier

I finally copy the app.js and trim.js and changed the render function like this:

render() {
		let displayText;
		if (!this.state.secondaryText) {
			displayText = (
			<div className="display-text-group">
				<span className="displayed-text" dangerouslySetInnerHTML={{ __html: `${this.state.primaryText} ${this.state.secondaryText}` }}/>
			</div>);
		}
		else if (this.state.displaySecondary) {
			displayText = (
			<div className="display-text-group">
				<span className="displayed-text" dangerouslySetInnerHTML={{ __html: `${this.state.primaryText} ${this.state.secondaryText}` }}/>
          <div className="read-more-button"
  						 onClick={this.setStatus.bind(this)}>
               {this.state.readLessText + ""}
               <ExpandLessIcon fontSize="inherit"/>
               </div>

			</div>);
		} else {
			displayText = (<div className="display-text-group">
				<span className="displayed-text" dangerouslySetInnerHTML={{ __html: this.state.primaryText }} />
				<div className="read-more-button"
						 onClick={this.setStatus.bind(this)}>
              {this.state.readMoreText + " "}
              <ExpandMoreIcon fontSize="inherit"/>
            </div>

			</div>);
		}

		return displayText;
	}

Probably there's something wrong or even only works with html text (that's what I need). I also added a readLessText prop and Material Icon. I leave this here, perhaps someone could make a PR with this idea.

axeligl avatar Jun 15 '20 17:06 axeligl