Useful/practical tips and tricks React/js - part2

63 reactions and 2 comments deserves a part 2(part1). Apparently my life was worthwhile after all.

Before we begin, José Muñoz introduced a 'monad' method in the comments of part1, which I just used today and consider as a better alternative than tip 2 on part1. Appreciation was due. Thank you José, you made my day :)

Also, I've added the 'beginner' tag because I certainly wish I knew these when I was a beginner(not that I'm not anymore).

Let the tips begin 😄

1. [React] console logging inside jsx

I think most of us have faced the scenario where we wanted to check the variable or state of something inside jsx. Like the following scenario -

const myJsx = (
    <someComponent>
        //  nested in god knows what
        {_.map(something, v => (
            <AnotherComponent someProps1="something" props2="else"/>
        )}
    </someComponent>
)

This works

const myJsx = (
    <someComponent>
        //  nested in god knows what
        {(() => console.log("hey this one works"))()}
        {console.log("this doesn't work and is probably what you tried before :)")}
        {_.map(something, v => (
            <AnotherComponent someProps1="something" props2="else"/>
        )}
    </someComponent>
)

True, about 1 minute of coding will suffice for a log function, but when you want a quick working solution, the above is the fastest workaround(I think)

2. [JS] a ===1 && a ===2 && a===3 && a===4 .... actually I think I saw a post with the same title on the bus

Long story short, use lodash or utilize arrays.

const aFunction = a => {
    if(_.every([1,2,3,4,5,6], v => v === a)) // or _.eq(v,a)
        console.log("check all of them")
    if(_.findIndex([1,2,3,4,5,6], v => v === a) !== -1)
        console.log("check for at least one of them")
    // for multiple custom conditions
    if(_.every([v => condition1(v), v => condition2(v)], func => func(a))
        console.log("wrap these up in a couple of functions and you have a lodash v2.0. Try making one, it's worth it")
}

3. [JS] when you're not bothered to use typescript but need simple checking

Too trivial for an explanation.

const isReq = () => throw new Error("missing params");
const aFunction = (a=isReq(), b=isReq()) => {
    console.log("please be a useful function");
}

yeah I'm probably running out of ideas...

4. [Redux] Yeah, it's not react but they're an iconic duo anyway - the ducks proposal

If you're not doing so already, use this file structure for redux(link), thank me later.
Simply put, you don't need to keep 3 files open to add a single action to redux anymore.

5. [JS] About randomizing... anything

search this and you probably get the following code snippet

Math.round(Math.random() * (max - min) + min);

Well, that works, but I prefer these. Honestly, it's up to you. It's pretty much why you need lodash.

_.random(min, max, false) //    pick integer in range, false=>true for floating point
_.sample(myArray)         //    pick a single value from array
_.sampleSize(myArray, n)  //    pick n values from array
_.shuffle(myArray)        //    returns the array shuffled(Fisher-yates shuffle - TLDR; pick randomly until all picked)

A mix of these coupled with effective use of the map function and you can conquer the world.

Wrapping up

I wanted to be as concise and on the point as possible with a slight sprinkle of witty remarks. Apparently I was too concise or I've forgotten whatever I was so keen on giving back to the community.
I sincerely hope you got something out of this post despite it being quite elementary.
I'm a recently 'converted' front-end react dev that used to code back-end situating in Seoul, Korea. Nice to meet you too.