I'm really stumped as to what is going on. I reviewed videos on map, arrow functions and implicit returns but still have no idea why my code is not making sense. When I console log everything it is fine, all the data is there. However, when I try to output the data into a div or list, nothing renders. What gives?
Here is the code in question:
const renderSearchResults = () => {
if (this.state.searchResults) {
Object.keys(this.state.searchResults).map((key) => {
console.log(this.state.searchResults[key]);
return <div>{this.state.searchResults[key].Title}</div>;
});
} else {
return <p>Loading...</p>;
}
};
Object.keys(this.state.searchResults).map() creates a new array but you need to return it in your renderSearchResults()
return Object.keys(this.state.searchResults).map((key) => {
...
Related
I have the below code which is causing me some confusion.
The itmLoop function (I appreciate it isn't looping in the below extract) works when loose in the curly brackets in the return section, but doesn't output anything when called as below?
Once working I will need to make it recursive so have to keep this as an external function.
What am I doing wrong?
Thanks in advance.
const Output = () => {
const items = [
{title:"lvl1-1",
children:[
{title:"lvl2-1"},
{title:"lvl2-2"}
]},
{title:"lvl1-2"},
{title:"lvl1-3"}
];
function itmLoop(arr=[]){
arr.map((e)=>{
return (<span>{e.title}</span>)
})
}
return ( { itmLoop(itms) } )
}
export default Output
Thanks to #Yaakov for pointing my mistake out.
The return statement was missing before the map function.
I have a function which returns array
getOffersCategories() {
cy.get(offersHeaders).then($els => {
cy.wrap(Cypress._.map(Cypress.$.makeArray($els), 'innerText')).as("categories")
})
return this;
}
Now I need to call this function and use array with forEach block having multiple test cases (something like this)
offersCategories.forEach((item, index) => {
it("Validate Max Carousels Limit, Left Right Swipe, See All link of " + item, function ()
{
...
}
})
For me it works fine if I array value is declared in same spec file Like var offersCategories = ["a", "b",c"] or fetched from fixtures, but not finding any way to use the same functionality when array details fetched from function.
Thanks in advance :)
While attempting to add the functionality to my project of saving the term in the Search Bar through refreshing your browser, I got it to where things were being saved correctly. The only issue came up with me saving the term in the "handleTermChange" method of the component, so it would pass undefined if you do not change the term in any way before searching. I attempt to bypass this in the "search" method by checking if the state for the term is empty (as it's live updated with the handleTermChange method). The conditional checking if the term in the state is empty works fine, as you enter it when you search without changing anything in the SearchBar. The first console.log prints out the variable fine, but the second console log still prints out an empty string, I'm probably missing something small, but I can't tell, I'm too tired to see little things.
search() {
if (this.state.term === '') {
const savedTerm = sessionStorage.getItem("inputValue");
console.log(savedTerm);
this.setState({term: savedTerm});
console.log(this.state.term);
}
this.props.onSearch(this.state.term);
}
Does this work ? Because of the state updates could be asynchronous, you can't be sure that term will be savedItem without the callback.
Doc here.
search() {
if (this.state.term === '') {
const savedTerm = sessionStorage.getItem("inputValue");
console.log(savedTerm);
this.setState({term: savedTerm}, () => {
console.log(this.state.term);
this.props.onSearch(this.state.term);
});
} else {
this.props.onSearch(this.state.term);
}
}
This call is asynchronous, try adding a callback function before accessing the property like:
search() {
if (this.state.term === '') {
const savedTerm = sessionStorage.getItem("inputValue");
console.log(savedTerm);
var thisState = this;
this.setState({term: savedTerm}, function () {
console.log(thisState.state.term);
});
}
this.props.onSearch(this.state.term);
}
I am wondering what this line does:
allPages = _.sortBy(allPages, [function(page) { return page.menu_order; }]);
I am wondering especially about the array containing a function
[function(page) { return page.menu_order; }]
could someone explain this to me? Will it return an array? How does this work, and what is this technique called? I have never seen this before.
Why is it that myCollection.find().fetch() returns an empty array [] even though the call is made within if(data){...}? Doesn't the if statement ensure that the collection has been retrieved before executing the console.log()?
Template.chart.rendered = function() {
var data = myCollection.find().fetch();
if(data) {
console.log(data);
}
$('#chart').render();
}
This returns [] in the browser Javascript console.
You could use count() instead which returns the number of results. data itself would be an empty array, [] which isn't falsey ( [] == true ).
Also don't use fetch() unless you're going to use the raw data for it because its quite taxing. You can loop through it with .forEach if you need to.
var data = myCollection.find();
if(data.count())
console.log(data);
//If you need it for something/Not sure if this is right but just an example
$('#chart').render(data.fetch())
The problem is that you have to wait for data from the server. When you just use Template.name.rendered function it is immediately invoked. You have to use Template.name.helpers function to wait for data from the server. Everything is described in the documentation.
It seems when you "remove autopublish" you have to also subscribe on the client.
if(Meteor.isClient) {
Meteor.startup(function() {
Myvars = new Mongo.Collection("myvars");
Meteor.subscribe('myvars')
});
}
and enable allow and publish on the server
if(Meteor.isServer) {
Meteor.startup(function () {
Myvars = new Mongo.Collection("myvars");
Myvars.allow({
insert: function () {
return true;
},
update: function () {
return true;
},
remove: function () {
return true;
}
});
if (Myvars.find().count() == 0) {
Myvars.insert({myvalue:'annoyed'});
}
Meteor.publish("myvars", function() {
return Myvars.find();
});
});
}
I'm new to this as well. I was just looking to have a global value that all clients could share. Seems like a useful idea (from a beginner's perspective) and a complete oversight on the Meteor teams behalf, it was nowhere clearly documented in this way. I also still have no idea what allow fetch is, that too is completely unclear in the official documentation.
It does, but in javascript you have the following strange behaviour
if ([]){
console.log('Oops it goes inside the if')
} // and it will output this, nontheless it is counter-intuitive
This happens because JS engine casts Boolean([]) to true. You can how different types are casted to Boolean here.
Check if your array is not empty in the beginning.
a = [];
if (a.length){
//do your thing
}