is there any solution how to check strings(ex:Google) and add Link react router into specific word(ex:Google)?

example like this photo

before

after

this is my very simple code

import React, { Component } from "react";
import { Link } from "react-router-dom";

class App extends Component {
  state = {
    text: "Google is my Friend, Google is Search Engine, Thanks to google"
    website: "Google Friend"
  };

  render() {
    let text = null;
    if (this.state.text.includes(this.state.website)) {
      return (text = (
        <div>
          <Link to={"/example"}>Google </Link> then state text
        </div>
      ));
    }
    return <div>{text}</div>;
  }
}

export default App;

it would be more helpful if you can show me how to add style inside specific word(ex: Google) like changing color, or adding bold/italic or anything

thanks

is there any solution how to check strings(ex:Google) and add Link react router into specific word(ex:Google)?

example like this photo

before

after

this is my very simple code

import React, { Component } from "react";
import { Link } from "react-router-dom";

class App extends Component {
  state = {
    text: "Google is my Friend, Google is Search Engine, Thanks to google"
    website: "Google Friend"
  };

  render() {
    let text = null;
    if (this.state.text.includes(this.state.website)) {
      return (text = (
        <div>
          <Link to={"/example"}>Google </Link> then state text
        </div>
      ));
    }
    return <div>{text}</div>;
  }
}

export default App;

it would be more helpful if you can show me how to add style inside specific word(ex: Google) like changing color, or adding bold/italic or anything

thanks

• javascript
• reactjs
• state

1 Answer 1

You can do it like this:

{this.state.text.split(" ").map(text => {
   return text === "Google" ? <Link to="/google">Google</Link> : text;
})}