String manipulation in JS and React

Question

I'm doing some string manipulation with API returned fields, and they have some unique characteristics, hence why I'm looking to try to adjust them.

For example:

one field comes from the JSON as: "contract_time": "full_time"

Provided this, I would like to try and manipulate it so that I get the output "Full Time".

I am calling it directly as the below:

          <BadgeComponentFirst>
            <Typography color="red" fontSize="0.6em">
              {job.contract_time}
            </Typography>

How would I pass such string manipulation to an object to first, remove the '_' and capitalise and the first of each word?

Thanks

I would instead suggest having an object that maps the API values to the display text. — Pointy
– Pointy, Commented Jun 3, 2022 at 14:45
{fix(job.contract_time)} where fix is whatever method you use to change it. As Pointy suggests mapping may be better, or use a library that converts between snake_case and other formats. — Dave Newton
– Dave Newton, Commented Jun 3, 2022 at 14:47

Dave Houlbrooke · Accepted Answer · 2022-06-03 15:09:16Z

2

The approach you need should differ if the API values for that field are a known in advance or not.

If the values are known in advance, use an object to map the known values to their user-facing equivalent:

const CONTRACT_TIMES = {
    full_time: "Full Time",
    part_time: "Part Time",
};

<Typography color="red" fontSize="0.6em">
    {CONTRACT_TIMES[job.contract_time] || "Unknown"}
</Typography>

If the API can return any value and you just want to display a cleaned up version, then write a function that does the manipulation you need:

function getFriendly(str) {
    return str.split("_").map(getFriendlyWord).join(" ");
}
function getFriendlyWord(word) {
    return word.slice(0, 1).toUpperCase() + word.slice(1);
}

<Typography color="red" fontSize="0.6em">
    {getFriendly(job.contract_time)}
</Typography>

answered Jun 3, 2022 at 15:09

Dave Houlbrooke

4483 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nolan · Accepted Answer · 2022-06-03 15:07:10Z

0

You want to split each word on '_' into an array, you can then map over the array and capitalize the first letter of each word. Then you want to join the words back together, separated by spaces. You can do:

let job = {
    contract_time: "full_time"
}

console.log(job.contract_time.split("_").map(word => word[0].toUpperCase() + word.substr(1)).join(' '));

console: Full Time

edited Jun 3, 2022 at 15:07

answered Jun 3, 2022 at 14:47

nolan

644 bronze badges

1 Comment

nolan Over a year ago

@DaveNewton it sure is, thanks!

Roman Bova · Accepted Answer · 2022-06-03 18:30:19Z

0

define a method transforms your data:

const capitalize = (str) => str[0].toUpperCase() + str.slice(1);

const verbose = (snake_cased) => {
    snake_cased.split('_').map(capitalize).join(' ');
};

And then you are free to use this transformer anywhere inside of JSX code without any limits. The only thing should keep in mind - this function will be fired every render. If this calculation is complicated - you may need some optimisation techniques.

const Component = () => (
    <BadgeComponentFirst>
        <Typography color="red" fontSize="0.6em">
            {verbose(job.contract_time)}
        </Typography>
    </BadgeComponentFirst>
);

edited Jun 3, 2022 at 18:30

answered Jun 3, 2022 at 14:51

Roman Bova

544 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

String manipulation in JS and React

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related