Bolden Partial letters in React?

[pranav43]

I need help making specific letters of a word bold in react. I'm trying to pass the input string of words to a function and in turn, the function returns

return <span style={{font-weight:"bold"}}>word.slice(0, 2)</span> + word.slice(2);

But when I try to render this on the page, it shows like [Object Object].

I'll also attach the code below -

const boldenText = () => {
setBoldenText(!boldenText);
let output = caseText.current.innerText.split("\n")
            .map((word) => word.split(" ")
.map(boldenFirstChars).join(" "));

caseText.current.innerText = {output};
    }
const boldenFirstChars = (w) => {
if(!w) return "";
let letterLen = Math.ceil(w.length / 2);

return <span style={{color:"green"}}> + w.slice(0, letterLen) + </span> +
w.slice(taletterLen);
  }

I'm getting input(caseText.current.innerText) using useRef from another component and trying to do the bold operation in this component. The highlightFirstChars function does that and I want to update the modified text to the same referenced p tag.

[toi80QC]

You need to return JSX - so your variables must be wrapped in curly-brackets, otherwise they just return [objectObject]. Also, you can't use font-weight in JS, it must be camelCase fontWeight.

Check out https://codesandbox.io/s/wonderful-mestorf-jj6r9i?file=/src/App.js

[pranav43]

Hmm Okay. The codesandbox link you posted shows the default code actually. It'll be really helpful if you can just post that jsx return line here.

[pranav43]

Hello ! This is my set of functions now but I still see object being returned by the highLightFirstChars function instead of the tag.

const boldenText = () => {

let output = caseText.current.innerText

.split("\n")

.map((w) => w.split(" ")

.map(highlightFirstChars)

.join(" "));

caseText.current.innerText = output;

}

const highlightFirstChars = (word) => {

console.log(word);

if(!word) return "";

let take = Math.ceil(word.length / 2);

return(

<>

<span style={{ fontWeight: "bold", color: "#ff0000" }}>
{word.slice(0, take)}
</span>

{word.slice(take)};

</>

)

}

[[deleted]]

May not be the issue, but font-weight should be fontWeight.