CODEWITHSUNDEEP
reactjs
niina
niina

Reputation: 119

How to add a link to the part of text passed to a react component?

I have to display a list of items. Each list item will have an item name. I have to add a link to this item name which is passed as a prop to the component.

I pass this text to be displayed (item name and other details) to another component. However, how can I add a link only to item name separating it from the text prop passed.

Below is the code,

class ListItem extends React.PureComponent {
    render = () => {
        switch (item.type) {
            case 'new_item_uploaded':
                return (
                    <Item
                        icon=<Svg/>
                        text={`${list_item.author.name} created item 
                        ${list_item.attributes.name}`}
                        timestamp={timestamp}
                    </Item>
                );
            case 'item_deleted':
                return (
                    <Item
                        icon=<Svg/>
                        text={`${list_item.author.name} deleted item 
                        ${list_item.attributes.name}`}
                        timestamp={timestamp}
                );
         } 
}

function Item(props) {
    return (
        <li className="notification">
            <div className="details">
                <div className="icon">
                    {props.icon}
                </div>
                <span>{props.text}</span>
                <Timestamp>{props.timestamp}</Timestamp>
            </div>
            {props.children}
        </li>
    );
}

What i want to do?

In the Item component for the text prop which contains {list_item.attributes.name} part should be a link. How can I do that?

I want to do something like this,

<Link to={`/some_url/${this.props.list_item.id}`}>i want to somehow to get 
the list_item.attributes.name here...</Link>

How can I do this??? Or any other way to achieve this...could someone help me with this. Thanks

Upvotes: 1

Views: 1799

Answers (1)

Steve Holgado
Steve Holgado

Reputation: 12071

You can pass down the id, authorName and name data as separate props:

<Item
  icon=<Svg/>
  timestamp={timestamp}
  id={list_item.id}
  authorName={list_item.author.name}
  name={list_item.attributes.name}
</Item>

Then you can use those in your Item component to construct the text containing the Link:

<span>
  <Link to={`/some_url/${props.id}`}>{props.authorName}</Link> created item {props.name}
</span>

If the text prop needs to be different in other cases then you could pass the JSX down as the prop:

<Item
  icon=<Svg/>
  timestamp={timestamp}
  text={
    <span>
      <Link to={`/some_url/${list_item.id}`}>{list_item.author.name}</Link> created item {list_item.attributes.name}
    </span>
  }
</Item>

Then your Item component can just render {props.text}.

I hope this helps.

Upvotes: 1

Related Questions