Breaking line JSX react-CodePudding

What should I do to break line when the property message is rendered inside a <p> in a different component? I can not get my head around this one... I tried with <br> or with \n but it keeps be rendered in one line...

const modalOn = (date, clinic) => {
  setError({
    title: "Do you want to remove the following shift?",
    message: "DATE: "   date   " CLINIC: "   clinic,
  });
};

CodePudding user response：

You can try to insert \n in your message and then when you have to render it you put something like

{message.split("\n").map((item, index) => {
return index === 0 ? item : [<br key={index} />, item];
})}

I don't know if it's the right way to do such a thing but it worked for me

CodePudding user response：

you need to use pre tag :

    const ReportMap = () => {
    useEffect(()=>{

    },[])
   const t= {
        title:`Do you want to remove the following shift?`,
            message: "DATE: "   "date"   " CLINIC: "   "clinic",
    }
    return (
        <div>
            <pre>{`${t.title}\n${t.message}`}</pre>
           
        </div>
    );
};

export default ReportMap;

or give white-space to p tag :

const ReportMap = () => {

   const t= {
        title:`Do you want to remove the following shift?`,
            message: "DATE: "   "date"   " CLINIC: "   "clinic",
    }
    return (
        <div>
            <p style={{whiteSpace: "pre"}}>{`${t.title}\n${t.message}`}</p>
        </div>
    );
};

export default ReportMap;

they worked for me very well.

CodePudding user response：

Thank you guys... I think I did not make a very clear question ... I wanted to break after the question mark, then after the date.... I found a solution which seems to work well.

const modalOn = (date, clinic) => { setError({ title: "Do you want to remove the following shift?", message: ["DATE: ", fullDate,
," CLINIC: ", clinic] }); };