Useful/practical tips and tricks React/js - part2
Tags: react, javascript, beginners
Published: 2019-11-27 14:37:54

63 reactions and 2 comments deserves a part 2([part1](https://dev.to/fly/useful-tips-and-tricks-react-js-part1-1kjh)). Apparently my life was worthwhile after all.

Before we begin, [José Muñoz](https://dev.to/jdmg94) introduced a ['monad' method](https://dev.to/jdmg94/comment/i6ke) 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 :smile:
### 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 - 
```js
const myJsx = (
	<someComponent>
		//	nested in god knows what
		{_.map(something, v => (
			<AnotherComponent someProps1="something" props2="else"/>
		)}
	</someComponent>
)
```
This works
```js
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.
```js
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.
```js
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](https://github.com/erikras/ducks-modular-redux)), 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
```js
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.
```js
_.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.