Object.keys()
gives an array - you'll need to assign it to a variable or console.log it:const val = {
id: 0,
imageLink: "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
altText: "A white cat wearing a green helmet shaped melon on its head. ",
codeNames: ["Juggernaut", "Mrs. Wallace", "Buttercup"]
};
const valKeys = Object.keys(val)
console.log(valKeys); // ["id", "imageLink", "altText", "codeNames"]
http://
not file://
. Change the path to your image to use url(images/apple-mac-new.jpg)
hey guys! I'm doing this task:
Could you please tell me which solution is better and why?
function findLongestWordLength(str) {
let longest = str
.split(' ')
.sort((a, b) => a.length < b.length);
return longest[0].length;
}
or this
function findLongestWordLength(s) {
return s.split(' ')
.reduce(function(x, y) {
return Math.max(x, y.length)
}, 0);
}
.reduce()
is just a for loop underneath which has complexity of O(n)
. Whereas .sort()
has complexity of O(nlogn)
which is greater..split()
is a loop itself. Can you think of solving it with only 1 loop?
.reduce()
or HOF's, using for
loop is completely fine.
function findLongestWordLength(str){
let max = -Infinity; // Assigning the smallest possible value to max
let current = 0;
for (let i = 0; i < str.length; i++){
if (str[i] === " "){ // If the string has reached a whitespace, then the previous word has ended so we compare its length to the max
max = Math.max(max, current);
current = 0;
}
else { //Otherwise, increase inc the count of letter by 1
current++;
}
}
return Math.max(max, current);
}
.reduce()
is declarative in nature so some people prefer that. IMO both are fine for readability but .reduce()
is better for maintaining code purpose.
I tried url("images/apple-mac-new.jpg") but it is not working @newmoon
@dhavalveera To help debug, we'd have to see your dev environment. I'm guessing you're trying to load index.html from a file://
path instead of http://
which will cause some challenges depending on security + OS settings
import {
observable,
flow,
configure,
action,
} from 'mobx';
import apiFetch from '../services/data-service';
configure({ enforceActions: true });
class UserStore {
@observable users = [];
fetchUsers = flow(function* fetch() {
try {
this.users = yield apiFetch('/users', 'get');
} catch (e) {
this.errorMessage = e.message;
}
})
}
const store = new UserStore();
export default store;
import userStore from './user-store';
export default {
userStore,
};
import React from 'react';
import { Provider } from 'mobx-react';
import AppRouter from './router';
import store from './store';
import 'tachyons';
import './styling/semantic.less';
const App = () => (
<Provider {...store}>
<AppRouter />
</Provider>
);
export default App;
```
import React, { Component } from 'react';
import {
Segment,
Button,
Grid,
Divider,
} from 'semantic-ui-react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@inject('userStore')
@observer
class Users extends Component {
static propTypes = {
userStore: PropTypes.objectOf(PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
PropTypes.func,
])).isRequired,
}
// componentDidMount() {
// const { userStore } = this.props;
// userStore.fetchUsers();
// }
selectUser = (id) => {
console.log(id);
}
render() {
console.log('props', this.props)
// const { userStore } = this.props;
// const { users } = userStore;
return (
<Segment>
users
</Segment>
);
}
}
export default Users;
```