Comparison of Two arrays Using JavaScript – Sai gowtham – Medium

  • There are different methods to achieve these But I’m showing one of them – First array – const arr1= array – const arr2= we are writing the compare function it helps us to compare above two arrays – Lets start – Step 1: We declared our function on first stepfunction compare(arr1,arr2){…
  • function compare(arr1,arr2){ – – const objMap={} – {if(e1 === e2){ – objMap[e1]=objMap[e1]+1||1 ; – } – } – )); – }In above code first we are taking arr1 and forEach() gives us back each element at the end we are returning with second arr chaining with forEach() – it gives…
  • ResourcesforEach() reference mdn – map() reference mdn

Comparison of two arrays and get unique elements from both arrays is very easy in JavaScript using forEach and Object Mapping In above code first we are taking arr1 and forEach() gives us back each…
Continue reading “Comparison of Two arrays Using JavaScript – Sai gowtham – Medium”

Create actions with redux-tide it’s simple! #redux #reactjs #Redux #React

Create actions with redux-tide it's simple!

#redux #reactjs #Redux #React

  • You don’t need to create reducers for rest-api data – – You should create reducers only for business front-end logic – – Redux-Tide – Do not force you to use only it, – – This is a small library helping you create normalization, actions, reducers and selector – – You…
  • js example from Usage section – – When you need to force a clear state of action, please use – – Please read Create one action for different entity id section and Other options to create an action – – And look examples: – – different-entity-id-example – – different-entity-id-source -…
  • () action id if you called where postId === 5 .
  • { post with id 5 is was deleted success } } we used action delPostById with prefix postId so, actionId has postId in actionId and if you want track all calls with any postId you hould used parentActionId property parentActionId – it’s actionId from action which was called .
  • () } } } – – For details you can look example: – – different-entity-id-example – – methods returns same action – – But generate new uniq dispatch type and new uniq action state – – You should be call , , when you are dispatch event and use getActionData…

redux-tide – Simple library for redux crud normalized state and actions/selectors for it
Continue reading “Create actions with redux-tide it’s simple!

#redux #reactjs #Redux #React”

React — Composing Higher-Order Components (HOCs) – Casey Morris – Medium

  • Data is passed down to the wrapped component.LoggerEasily log all prop changes (on render) for a given component, helpful for quick debugging purposes.PropsSometimes you need to inject props into a component, this is especially useful when using a branch HOC and only want a single branch to receive specific props.TimeoutsAdding…
  • This HOC will also spread the current data item as props into the supplied component.HOCsNow that we’ve gone over a few use cases, lets look at some simple implementations before we get into any complex chaining.hasPropsTakes a single parameter, injectedProps and returns a wrapped component with the supplied injectedProps .
  • Useful when you need to inject props to a single component within the branch hoc, as the props supplied are injected into both passing and failing components.Use:Use with branch HOC:hasLoggerTakes a single parameter, prefix which prefixes the logged message, defaults to an empty string.
  • Injects data, hasError, error, useDefault, loading, and loadingMessage as props to be used in the wrapped no parameters and returns a wrapped component with injected props addTimeout and clearTimeouts.
  • This page includes a MockPostContainer which extends the Post component with a logger, mock data, loader, error, default, and list.Posts, Todos, Comments, and Users PagesAll of these pages consume real API endpoints from They each extend a single component (Post, Todo, Comment, User) with the isContainer and isList HOCs.Wrapping UpI hope…

To put it simply, a higher-order component is a function, that takes a component and returns a new component. I like to think of them as parameterized components. Many times I find myself creating…
Continue reading “React — Composing Higher-Order Components (HOCs) – Casey Morris – Medium”

Rendering a function with React – kentcdodds

  • But there are reasons for the API as it is and that’s not what we’re going over in this newsletter…With ReactSo thinking about this in the context of React:const getHomeContent = getContent(‘pages.home’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”About/aSo far so good.
  • Anyway, this will break the app:const getHomeContent = getContent(‘pages.typo’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// 💥 error 💥Again, this is happening because getContent(‘pages.typo’) will return the string {pages.typo} (to indicate that there’s no content at that path and the developer needs to fix that problem to get the content)….
  • The issue is that you can’t invoke a string but that’s what’s happening because getHomeContent is a string, not a function.A solution and a new problemSo the change I made this week makes it so when there’s no content at a given path, instead of a string, it returns a “sorta-curried”…
  • No problem.So now this wont throw an error, but we lose rendering the path if there’s no content!const getHomeContent = getContent(‘pages.typo’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”/aAnd we want to make sure that we show the missing content so it’s more obvious for developers (yes…
  • Let’s rewrite the above to make this more clear:const getHomeContent = getContent(‘pages.typo’)const aboutContent = ui = a in this example is a function because the call to getContent had a typo, so we’ll never actually find content that matches the full path.

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This week I was working on an…
Continue reading “Rendering a function with React – kentcdodds”

Array Methods Explained : Filter vs Map vs Reduce vs Foreach

  • we all know why this method is used for and even you don’t know about this method the name pretty much explains everything.Foreach takes a callback function and run that callback function on each element of array one by one.var sample = [1, 2, 3];// es5sample.forEach(function (elem, index){ console.log(elem + ‘ comes at ‘ + index);})// es6sample.forEach((elem, index) = `${elem} comes at ${index}`)/*output1 comes at 02 comes at 13 comes at 2*/For every element on the array we are calling a callback which gets element its index provided by foreach.Basically forEach works as a traditional for loop looping over the array and providing you array elements to do operations on them.okay!
  • If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.var sample = [1, 2, 3] // yeah same array// es5var result = sample.filter(function(elem){ return elem !
  • As a ReactJS developer I use map a lot inside my application UI.Map like filter foreach takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.Let’s understand map with an examplevar sample = [1, 2, 3] // i am never gonna change Boo!
  • Yeah// es5var mapped = sample.map(function(elem) { return elem * 10;})// es6let mapped = sample.map(elem = elem * 10)console.log(mapped);/* output */[10, 20, 30]Map ran through every element of the array, multiplied it to 10 and returned the element which will be going to store inside our resulting array.Like filter, map also returns an array.
  • ReduceAs the name already suggest reduce method of the array object is used to reduce the array to one single value.For example if you have to add all the elements of an array you can do something like this.var sample = [1, 2, 3] // here we meet again// es5var sum = sample.reduce(function(sum, elem){ return sum + elem;})// es6var sum = sample.reduce((sum, elem) = sum + elem)console.log(sum)reduce takes a callback ( like every function we talked about ).

Okay so yeah we know they are different they have different purpose and goals still we don’t bother to understand them. We use arrays. A lot of arrays. We use arrays to show search lists, items added…
Continue reading “Array Methods Explained : Filter vs Map vs Reduce vs Foreach”

💥 Just released some optimizations to react-localize-redux. mmmmjoy 💥 #reactjs #Redux

💥 Just released some optimizations to react-localize-redux. mmmmjoy 💥 #reactjs #Redux

  • Typically you will store your translation data in json files, but the data can also be a vanilla JS object.
  • Once your translation data is in the correct format use the addTranslation action creator.
  • A selector that takes your redux and returns the raw translation data.
  • Redux action creator to set which languages you are supporting in your translations.
  • Redux action creator to add new translation data to your redux store.

Dead simple localization for your React/Redux components
Continue reading “💥 Just released some optimizations to react-localize-redux. mmmmjoy 💥 #reactjs #Redux”

Using JavaScript’s map function – David Ford – Medium

Using JavaScript’s map function  #react #javascript #reactjs

  • Using JavaScript’s map functionThe map function simply transforms one array into an other array.
  • For example, suppose you have an array of person objects but what you really need is an array of names (strings):The map function will convert the array of person objects into an array of names (strings).
  • Lets say this is the array you start with:const friends = [ {id:1, name: ‘Dave’,age:50}, {id:2,name: ‘Kellie’,age:42}, {id:3,name: ‘Max’,age:12}, {id:2,name: ‘Jack’,age:12}];and you want to convert it to this:[‘Dave’, ‘Kellie’, ‘Max’,’Jack’]You start by defining a mapping function.
  • The mapping function operates on a single row, converting (or mapping) one person into one name (string):const mappingFunction = p – p.name;Then you pass the mapping function to array.map like this:const names = returns:[‘Dave’, ‘Kellie’, ‘Max’,’Jack’]You can also do this as a one liner:const names = friends.map(p – p.name);Map function in React JSXThis type of thing is very common in React JSX.
  • To map an array of person objects to an array of li elements, use a mapping function like this:const mappingFunction = p – li{p.name}/li;To ensure React’s DOM diff’ing works correctly, you’ll need to provide each li with a unique key:const mappingFunction = p – li key={p.id}{p.name}/li;In context, this might look something like this:render(){ return ul {friends.map(p – li key={p.id}{p.name}/li)} /ul;}

The map function simply transforms one array into an other array. For example, suppose you have an array of person objects but what you really need is an array of names (strings): You start by…
Continue reading “Using JavaScript’s map function – David Ford – Medium”