CODEWITHSUNDEEP
javascriptreactjs
react1
react1

Reputation: 25

How to print a text that has a link in its content?

how can i print a content inside i want to put a link

i was trying this

setContent(`hi 
    ${(
      <Typography className={classes.link} onClick={showProfile}>
        ${him.first_name} ${him.last_name}
      </Typography>
    )}
    their car is ${him.car} 
    and house is ${him.house}`)

but i am getting this

hi [object Object] their car is 1 and house is 1

also i need to show breaking line like

hi [object Object]  
their car is 1  
and house is 1

i am rendering like this:

 <DialogContent>{content}</DialogContent>

Upvotes: 0

Views: 94

Answers (2)

Andy
Andy

Reputation: 63524

As a general rule React state shouldn't be used to store HTML; it should take care of simple data structures that your React components will then render when the state is updated.

In this example I've created an array of objects, and added them to state. I also have a couple of other states - the first is to maintain the currently selected person, the other to change the visibility of the Dialog (I don't know which library - if any you're using - so I had to make my own.)

React iterates over the data to create a list of names. If you click on a name the selected state will be updated with that object from data, and the Dialog will appear. If you choose another name the dialog will simply update. If you click on the close button the dialog will hide.

const { useState } = React;

const initialState = [
  { id: 1, firstName: 'Bob', lastName: 'Jones', car: 'Saab', house: '999 Letsbe Avenue' },
  { id: 2, firstName: 'Dave', lastName: 'Scott', car: 'Pinto', house: '12 Lake Lane' },
  { id: 3, firstName: 'Karen', lastName: 'Smith', car: 'Bicycle', house: '3 Joyless Terrace' }
];

function Example() {

  const [data, setData] = useState(initialState);
  const [selected, setSelected] = useState(false);
  const [visible, setVisible] = useState(false);
  
  // Get the id from the clicked name, `find` that
  // object in the data, and update the `selected` state with it.
  // Update the visibility of the dialog state.
  function handleClick(e) {
    const { id } = e.target.dataset;
    const person = data.find(person => person.id === +id);
    setSelected(person);
    setVisible(true);
  }
  
  // When the dialog button is clicked
  // hide the dialog
  function handleClose() {
    setVisible(false);
  }
  
  // `map` over the data and add the dialog
  // If a name is clicked on call `handleClick`.
  // `handleClick` will update the state and the
  // dialog will appear
  return (
    <div>
      {data.map(person => {
        return (
          <div
            className="person"
            data-id={person.id}
            onClick={handleClick}
          >{person.firstName}
          </div>
        );
      })}
      {visible && (
        <Dialog
          person={selected}
          handleClose={handleClose}
        />
      )}
    </div>
  );
  
}

function Dialog({ person, handleClose }) {
  return (
    <div>
      <div>
        <p>First Name: {person.firstName}</p>
        <p>Last Name: {person.lastName}</p>
        <p>Car: {person.car}</p>
        <p>House: {person.house}</p>
      </div>
      <button onClick={handleClose}>Close</button>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);
.visible { display: block; }
.person { padding: 0.3em; background-color: #efefef; margin-bottom: 0.2em; border: 1px solid #454545; }
.person:hover { cursor: pointer; background-color: #dfdfdf; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 0

Ibrahim Tarigan
Ibrahim Tarigan

Reputation: 96

you setContent using Template literals with mean it will be a string, not JSX

i suggest you to wrap it with <div> and dont use Template literals.

  const him = {
    first_name: "jon",
    last_name: "doe"
  };
  const [content, setContent] = useState(
    <div>
      hi 
      <Typography className={classes.link} onClick={showProfile}>
        ${him.first_name} ${him.last_name}
      </Typography>
      their car is ${him.car}
      and house is ${him.house}
    </div>
  );

https://codesandbox.io/s/react-playground-forked-f3qc3?file=/index.js

Upvotes: 1

Related Questions