Develop Reference

.map not working on array of objects in react [duplicate]

This question already has answers here:
Loop inside React JSX
(84 answers)
When should I use a return statement in ES6 arrow functions
(6 answers)
Closed 2 years ago.
I have the following code:
const displayData = (data) => {
console.log(data);// this shows an array of objects
if (!data.length) return null;
return data.map((movie, index)=>{
<div key={index} className="movie-display" >
<h2>{movie.Title}</h2>
<p>{movie.Year}</p>
</div>
})
}
return (
<div className="search">
<form >
<input
type="text"
placeholder="Enter details here"
onChange={(event) => setSearchTerm(event.target.value)}
/>
<button type="button" onClick={() => fetchData()}>Search</button>
</form>
<div className="movies-list">
{displayData(data)}
</div>
</div>
);
}
And can't get data.map to work
This is what that commented console.log shows in console:

Your syntax is off. You’re not returning anything inside the map function.

You're not returning anything from the map() lambda. You should return the JSX from your map callback as follows:
return data.map((movie, index) => {
return <div key={index} className="movie-display">
<h2>{movie.Title}</h2>
<p>{movie.Year}</p>
</div>;
});

What is this['string'](); in javascript and how it works; [duplicate]

This question already has answers here:
JavaScript property access: dot notation vs. brackets?
(17 answers)
Closed 2 years ago.
I searched in google but i could not find anything
test.js
class Hero(){
heroVar = 'hero1'
hero1() {
alert('I am Hero 1');
}
onClick(){
this[this.heroVar](); //this.heroVar value gets substituted with hero1
}
}
Is there any better use case,how this this[this.heroVar](); works,please explain,
does this also adds '.' in between 'this' and '[]' like this.hero1()

In Javascript class is an Object so
class Hero(){
heroVar = 'hero1'
hero1() {
alert('I am Hero 1');
}
onClick(){
this[this.heroVar](); //this.heroVar value gets substituted with hero1
// equal with this['hero1']()
// equal with hero1()
}
}

error 'count' is defined but never used Vue.js [duplicate]

This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 8 months ago.
Im getting this error and i dont know how to solve it... It says that my "count" is defined but never used. I'm using it in my template but it's like it doesnt feel it.
<template>
<div class="root">
<button v-on:click="count += 1">Thumbs up</button>
<button v-on:click="count -= 1">Thumbs down</button>
<div class="countResult">
{{count}}
</div>
</div>
</template>
<script>
export default {
data: () => {
count: 0
}
}
here's my full error: ./src/components/voteSnippets.vue
Module Error (from ./node_modules/eslint-loader/index.js):
C:\Users\x\x\x\snippets\code-snippets\src\components\voteSnippets.vue
17:9 error 'count:' is defined but never used no-unused-labels
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.

You have to return an object containing all your variables from the data function of yours.
Correct code would be
export default {
data: () => {
return {
count: 0
}
}
}

How can i display errors in react ; i am getting the array errors from redux? [duplicate]

This question already has answers here:
Uncaught TypeError: Cannot read property 'map' of undefined at {Component}.render in ReactJs
(3 answers)
How to handle calling functions on data that may be undefined?
(2 answers)
Closed 4 years ago.
this my redux array that i get from a backend node js api
errors:
errors: Array(1)
0: {location: "body", param: "name", value: "mamadou bah transfert", msg: "ce nom est déja utilisé"}
length: 1
And in React Iam triying to show the errors like this
<div class="col m12">
{this.props.offices.errors.errors?
<span className="center-align red-text">
{this.props.offices.errors.errors.map((error,i) => <p key={i}> {error.param=='name'?error.msg:''}</p>)
</span> : '' }
</div>
this is the errors that i get always
react-errors

Since the errors comes from an asynchro request, you should secure the case that the object doesn't exist yet.
this.props.offices && this.props.offices.errors.errors.map(...)
However to be 100% sure that it won't fail, I would use a defualt value of offices and also check if the errors exists and it's an iterable array.
const { offices = {} } = this.props;
offices.errors && Array.isArray(offices.errors.errors) && offices.errors.errors.map(...);

Try with this
The point is that when you want to access nested objects, you need to first check whether the nested object really exist and then access it like using below conditional check in your case
<div class="col m12">
{this.props.offices && this.props.offices.errors && this.props.offices.errors.errors?
<span className="center-align red-text">
{this.props.offices.errors.errors.map((error,i) => <p key={"Key-"+i}> {error.param=='name'?error.msg:''}</p>)
</span> : '' }
</div>

Run function passed from data attribute [duplicate]

This question already has answers here:
How to execute a JavaScript function when I have its name as a string
(36 answers)
Closed 7 years ago.
I want to be able to run a function that is passed by name from a data attribute on the HTML side. I've tried the following below.
HTML:
<div class="generic-select" data-help-on-shown="genericFunction" >
</div>
Javascript:
function genericFunction() {
console.log("generic function called");
}
Other Javascript (separate file):
//stepEl is correct divider from above
var genFunction = typeof (stepEl.data("helpOnShown")) === "undefined"
? null
: stepEl.data("helpOnShown");
//this prints "genericFunction" as expected
console.log("genFunction = " + genFunction);
if (genFunction) {
genFunction(); //gives error!
}
However, this gives me an error. Is there a way to call a function by a string name?

If the function is "global", it exists as a property of window:
window[functionname]()