How to render text or url in React?

Question

In a React project, I have JSON data as follows

const data = [
  { id: '123abc', comment: 'How are you?' },
  { id: '234abc', comment: 'https://flower.jpg' },
  { id: '123xyz', comment: 'Whatsupp?' },
  { id: '335sde', comment: 'https://galaxy.png' },
];

I'am trying as under

<div>
{/* For images */}
<img src={data.comment} height="50px"/>

{/* For text */}
<Typography variant="caption">
   {data.comment}
</Typography>
</div>

As seen above some comments are text whereas some are images. So, how to render it? Any appropriate solution highly appreciated

Yes but what conditions need to apply for rendering text or image? — Prakash Patil
– Prakash Patil, Commented Feb 15, 2021 at 4:20
Is the issue that you want to show images if a string is a url, and render text otherwise? If so, you can use regex like the one here (stackoverflow.com/questions/2838404/…) to check if a string is a valid url, and to render it as text otherwise. — Daniel Felsenthal
– Daniel Felsenthal, Commented Feb 15, 2021 at 4:29

Deep Patel · Accepted Answer · 2021-02-15 06:05:46Z

3

create function for check URL and use conditional rendering.

validateUrl = (string) => {
    var res = string.match(
      /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g
    );
    return res !== null;
  };
  render() {
    return (
      <div>
        {this.validateUrl(data.comment) ? (
          <img src={"data.comment} height="50px" />
        ) : (
          <Typography variant="caption">{data.comment}</Typography>
        )}
        
        {/* // for comment:"How are you?" it returns false and it renders text and
        for comment:"https://galaxy.png" it returns true and it renders image */}
      </div>
    );
  }

edited Feb 15, 2021 at 6:05

answered Feb 15, 2021 at 5:45

Deep Patel

707 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Buzatto de Campos Over a year ago

fwiw, I would advise to create the desired function outside of render method. otherwise each rerender validateUrl is recreated.

aitchkhan · Accepted Answer · 2021-02-15 06:29:01Z

This should work:

const data = [
  { id: '123abc', comment: 'How are you?' },
  { id: '234abc', comment: 'https://flower.jpg' },
  { id: '123xyz', comment: 'Whatsupp?' },
  { id: '335sde', comment: 'https://galaxy.png' },
];

const validateUrl = (string) => {
  const result = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g)
  return result !== null;
}

const renderImage = (link) => (<img src={link} height="50px"/>)
const renderTypography = (comment) => (
  <Typography variant="caption">
    {comment}
  </Typography>
);

render () {
  return data.map(row => (
    <div>
      validateUrl(row.comment) ? renderImage(row.comment) : renderTypography(row.comment)
    </div>
  ))

}

Collectives™ on Stack Overflow

How to render text or url in React?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related