We Keep Coding

How to make bold part of text , passed from object to react component?

This is the page html where I create the object. Part of description must be bold:
const agencyProps = {
title: "Managed agency selection",
paragraph: "Strengten your onboarding process",
videoImage: {
src: "/img/video.png",
alt: "background",
width: 330,
height: 520,
},
selections: {
cardOne: {
title: "Brief",
bold: "THIS",
description: `Complete brief or simple guidance on what to include, we've got you covered`,
width: "430px",
},
cardTwo: {
title: "Search",
description:
"In-depth agency search covering, criteria matching, door knocking and due-dilligence vetting.",
width: "460px",
},
cardThree: {
title: "Pitch",
description:
"Comprehensive pitch management, including comms, diary management and pitch hosting.",
width: "490px",
},
},
};
This is the component, where I pass the object property:
<StyledCard style={{ maxWidth: `${selections.cardTwo.width}` }}>
<StyledIconWrapper>
<FaSearch size="1x" color="#0f0f0f" />
</StyledIconWrapper>
<StyledTitleDescriptionWrapper>
<StyledSelectTitle>
{selections.cardTwo.title}
</StyledSelectTitle>
<StyledSelectDescription>
{selections.cardTwo.description}
</StyledSelectDescription>
</StyledTitleDescriptionWrapper>
</StyledCard>
I've tried to put in <b></b> the part which I like, tried with making getter and using "this" with property 'bold' but still cant manage to catch the words which i like to be bold.
Hope explanation is ok and thanks in advance!

One way is to wrap the text to be bold in a <strong> tag, e.g.:
cardOne: {
description: "This text is <strong>bold</strong>.",
title: // ...
width: // ...
}

you have to use <strong> <strong/> tag and pass that to dangerouslySetInnerHTML
more information on this page

You can add <strong> or <b> tags around the part of the description you want bolded.
cardOne: {
title: "Brief",
description: `Complete brief or <b>simple guidance</b> on what to include, we've got you covered`,
width: "430px"
};
Then you can render the description with dangerouslySetInnerHTML.
<p dangerouslySetInnerHTML={{ __html: cardOne.description }} />

You can set the description to a React fragment and use the <strong> element to wrap the bold text.
cardTwo: {
title: "Search",
description:
<>In-depth agency search <strong>covering</strong>, criteria matching, door knocking and due-dilligence vetting.</>,
width: "460px",
},

there is also this npm package you can use. you can map through your obj and if the bold attribute is needed replace the text or part of it with your styled text.
https://www.npmjs.com/package/react-string-replace
obj.map(item => (
<YOURLIST>
{reactStringReplace(
item.DESCRIPTION,
item.DESCRIPTION,
match => (
<span style={{fontWeight:bold}}>{match}</span>
)
)}
</YOURLIST>
))

Ternary Operator Inline style tag React

In my React/Typescript application, I want to conditionally display a color depending if the value of payload[1] is null or not. As seen below, I have the style tag inline.
<li className="recharts-tooltip-item" style={{ payload[1] ? color : `${payload[1].color}` }}>
{payload[0] ? `${payload[1].dataKey} : ${payload[1].value}` : ""}
</li>
I have tried following suggestions from, A better way to change the background color using a ternary operator, but I am getting error: Type '{ payload: Payload<ValueType, NameType>[]; 1: any; }' is not assignable to type 'Properties<string | number, string & {}>'.
Object literal may only specify known properties, and 'payload' does not exist in type 'Properties<string | number, string & {}>'
Update of Code:
const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
if(active && payload && payload.length){
return (
<div className = "custom-tooltip">
<ul className="recharts-tooltip-item-list" style={{padding: '0px', margin: '0px', listStyle:'none'}}>
<li className="recharts-tooltip-item" style={{ color: payload[0] ? color : `${payload[0].color}`}} >
{payload[0] ? `${payload[0].dataKey} : ${payload[0].value}` : ""}
</li>
</ul>
</div>
);
}
return null;
}

You haven't defined a property in the style prop properly. You're using the raw color value in the falsy situation. I'm pretty sure this is what you're looking for
<li style={{
color: payload[1] ? color : `${payload[1].color}`
}}>
{payload[0] ? `${payload[1].dataKey} : ${payload[1].value}` : ""}
</li >
For your second problem, Make your own type definition for your component. Something along the lines of this should work
type CustomTooltipProps = Omit<TooltipProps<ValueType, NameType>, 'payload'> & {
payload: {
dataKey: any;
value: any;
color: any;
}[]
}

<li className="recharts-tooltip-item"style={{ color: payload[1] ? "red" : `${payload[1].color}` }}>
Can you try to write the code like this?

Fluent UI style not working in passed commands with buttons to CommandBar

i am using Fluent UI in my project. I dont know how to change hoover style in CommandBar.
I initializing my buttons with this simple code in javascript:
// inside `buttons` array
key: 'newfolder',
text: 'New Folder',
iconProps: {
iconName: 'NewFolder',
styles: {
root: {
color: 'orange'
},
rootHovered: {
color: 'red'
}
}
},
onClick: ...
Then i am passing this buttons to CommandBar:
<CommandBar
items={buttons}
styles={{
root: {
paddingLeft: '5px'
},
}}
/>
and i can override default color to asked one.
My question is, how to set mouse hover color over button in CommandBar component?
As you can see, it is still blue even if i passed red as rootHovered color. I cant pass Hovered prop to CommandBar because i get error:
(property) rootHovered: {}
Type '{ root: { paddingLeft: string; }; rootHovered: {}; }' is not assignable to type 'IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles> | undefined'.
Object literal may only specify known properties, and 'rootHovered' does not exist in type 'IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>'.ts(2322)

You can change it on hover by using buttonStyles prop like this:
text: 'New Folder',
buttonStyles: {
iconHovered: {
color: 'red'
}
},
Find out more about this prop on: https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar#implementation under section ICommandBarItemProps interface

Using Mantine UI .tsx file within a javascript based react project

I currently am building a fitness website and am looking to use Mantine UI accordion component which is based off Typescript. I built my react project with javascript. Is there a way to create a .tsx file and call it into my app.js file?
Here's the error I am currently receiving. Am I missing the export on the Accordian code?
Module not found: Error: Can't resolve './components/Faq' in '/Users/rodriguezmedia/Desktop/blended/src'
import { Group, Avatar, Text, Accordion } from '#mantine/core';
import React from 'react';
const charactersList = [
{
image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
label: 'Bender Bending Rodríguez',
description: 'Fascinated with cooking, though has no sense of taste',
content: "Bender Bending Rodríguez, (born September 4, 2996), designated Bending Unit 22, and commonly known as Bender, is a bending unit created by a division of MomCorp in Tijuana, Mexico, and his serial number is 2716057. His mugshot id number is 01473. He is Fry's best friend.",
},
{
image: 'https://img.icons8.com/clouds/256/000000/futurama-mom.png',
label: 'Carol Miller',
description: 'One of the richest people on Earth',
content: "Carol Miller (born January 30, 2880), better known as Mom, is the evil chief executive officer and shareholder of 99.7% of Momcorp, one of the largest industrial conglomerates in the universe and the source of most of Earth's robots. She is also one of the main antagonists of the Futurama series.",
},
{
image: 'https://img.icons8.com/clouds/256/000000/homer-simpson.png',
label: 'Homer Simpson',
description: 'Overweight, lazy, and often ignorant',
content: 'Homer Jay Simpson (born May 12) is the main protagonist and one of the five main characters of The Simpsons series(or show). He is the spouse of Marge Simpson and father of Bart, Lisa and Maggie Simpson.',
},
{
image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png',
label: 'Spongebob Squarepants',
description: 'Not just a sponge',
content: 'SpongeBob is a childish and joyful sea sponge who lives in a pineapple with his pet snail Gary in the underwater city of Bikini Bottom. He works as a fry cook at the Krusty Krab, a job which he is exceptionally skilled at and enjoys thoroughly. ',
},
]
interface AccordionLabelProps {
label: string;
image: string;
description: string;
}
function AccordionLabel({ label, image, description }: AccordionLabelProps) {
return (
<Group noWrap>
<Avatar src={image} radius="xl" size="lg" />
<div>
<Text>{label}</Text>
<Text size="sm" color="dimmed" weight={400}>
{description}
</Text>
</div>
</Group>
);
}
function Demo() {
const items = charactersList.map((item) => (
<Accordion.Item label={<AccordionLabel {...item} />} key={item.label}>
<Text size="sm">{item.content}</Text>
</Accordion.Item>
));
return (
<Accordion initialItem={-1} iconPosition="right">
{items}
</Accordion>
);
}

Is there a way to create a .tsx file and call it into my app.js file?
No. You need to delete all of the typescript types (interfaces ...etc) and rename the file to .js.
You need a typescript (compiler) to convert the .tsx file into .js. Otherwise you cannot use .tsx files, since browser can only parse js.

Error with react-native JSX elements when using TypeScript

I am creating an app using react-native and typescript.
I am facing following errors;
<AuthDetails
style={{ marginTop: 60 }} // this line is giving error1.
setUdaisId={this.setUdaisId}
setPassword={this.setPassword}
/>
error1: [ts] Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>...'.
Similarly,
<TextInput
underlineColorAndroid={'transparent'}
secureTextEntry={true}
placeholder = "Password"
placeHolderStyle = {styles.placeHolderStyle} // this line is giving error2.
style = {[styles.textInput, {marginTop:20}]}
/>
error2 : [ts] Property 'placeHolderStyle' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes> & ...'.
And
<Image
style={styles.avatar}
source={this.state.avatarSource}
resizeMode={this.state.resizeMode} //this line gives error3.
/>
error3 : [ts]
Type '{ style: RegisteredStyle; source: any; resizeMode: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes> & Read...'.
Type '{ style: RegisteredStyle; source: any; resizeMode: string; }' is not assignable to type 'Readonly'.
Types of property 'resizeMode' are incompatible.
Type 'string' is not assignable to type '"center" | "stretch" | "cover" | "contain" | "repeat" | undefined'.