These are chat archives for FreeCodeCamp/Help

14th
Jan 2019
Angel
@angelparkour499
Jan 14 00:25 UTC
Hi, guys
I'm trying to do an nav bar similar to the one in the walmart website
And i don't really know how
Plz hlp
Jacky Lui
@Recelis
Jan 14 00:44 UTC
@angelparkour499 transparent background, and round borders on each button. Onhover, change to text with some animations (I'm not expert in animations though)
Jacky Lui
@Recelis
Jan 14 01:40 UTC
Hey everyone, I keep getting the React-Native problem where I run react-native run-android, and the build is successful. It starts the Intent and it loads onto the simulator. But then the app crashes? Has been happening on my windows comp, but more so on my Mac even with a fresh Awesomeproject. Is this a known problem, and if so what is the fix?
Claudio Restifo
@Marmiz
Jan 14 04:33 UTC
it should. Are you sure that the prop id undefined?
or alternatively, are you sure Button is adding that prop to the markup?
glitz20
@glitz20
Jan 14 04:36 UTC
nvm got it working
Zaza
@ForkInSpace
Jan 14 10:50 UTC
hey folks anyone around ?
Have a webpack 4 question
migrating from gulp and trying to figure out how I could configure js files injecting in .hbs file
basically have a single index.html which I have to convert to .hbs and inject .js files in it (vendor and other custom files)
any thoughts?
Anand Potukuchi
@anandpotukchi
Jan 14 13:04 UTC
what is the fastst and shortest way to learn async/await
Aditya
@ezioda004
Jan 14 13:25 UTC
Learn promises.
May Kittens Devour Your Soul
@diomed
Jan 14 13:26 UTC
future is promises
Anand Potukuchi
@anandpotukchi
Jan 14 13:38 UTC
@ezioda004 where is thee question
fastest tutoril
Anand Potukuchi
@anandpotukchi
Jan 14 13:54 UTC
i have anther question
so i have props in file Stories.js
and want to include it in Story.js
so i added <Story author = {this.state.author } />
and called this.props.author in Story.js
it doesn't work
Kaz Baig
@kbaig
Jan 14 14:15 UTC
@anandpotukchi console log this.state.author in Stories and see if you're getting anything
Anand Potukuchi
@anandpotukchi
Jan 14 14:15 UTC
@kbaig o BTW where do icheckfor the console in vscode
Kaz Baig
@kbaig
Jan 14 14:16 UTC
in the terminal
or the browser
Anand Potukuchi
@anandpotukchi
Jan 14 14:17 UTC
whuch terminal
one more thing
{
  "by" : "tel",
  "descendants" : 16,
  "id" : 121003,
  "kids" : [ 121016, 121109, 121168 ],
  "score" : 25,
  "text" : "<i>or</i> HN: the Next Iteration<p>I get the impression that with Arc being released a lot of people who never had time for HN before are suddenly dropping in more often. (PG: what are the numbers on this? I'm envisioning a spike.)<p>Not to say that isn't great, but I'm wary of Diggification. Between links comparing programming to sex and a flurry of gratuitous, ostentatious  adjectives in the headlines it's a bit concerning.<p>80% of the stuff that makes the front page is still pretty awesome, but what's in place to keep the signal/noise ratio high? Does the HN model still work as the community scales? What's in store for (++ HN)?",
  "time" : 1203647620,
  "title" : "Ask HN: The Arc Effect",
  "type" : "story"
}
Kaz Baig
@kbaig
Jan 14 14:18 UTC
Do you not have a terminal open? How are you running your code
Either way, you should be able to see the console log in the browser
Anand Potukuchi
@anandpotukchi
Jan 14 14:19 UTC
@kbaig what's wring with avove axios req
 componentDidMount() {
        axios
        .get(endpoint)
        .then(function(response){
            const author = response.data.by;
            this.setState({
                author: author
            });
        })

    }
Kaz Baig
@kbaig
Jan 14 14:21 UTC
Again, try logging response.data to see if you're getting what you expect
Anand Potukuchi
@anandpotukchi
Jan 14 14:22 UTC
this.seTstate is not defined
Kaz Baig
@kbaig
Jan 14 14:22 UTC
change the callback to an arrow function and it will be
Anand Potukuchi
@anandpotukchi
Jan 14 14:22 UTC
its a react natvie app
Kaz Baig
@kbaig
Jan 14 14:23 UTC
But you have an arrow function in the catch
Anand Potukuchi
@anandpotukchi
Jan 14 14:23 UTC
removed the catch
Kaz Baig
@kbaig
Jan 14 14:23 UTC
then store this as a variable above the axios call
Anand Potukuchi
@anandpotukchi
Jan 14 14:24 UTC
how
Kaz Baig
@kbaig
Jan 14 14:24 UTC
const _this = this;
...
_this.setState(...);
Anand Potukuchi
@anandpotukchi
Jan 14 14:25 UTC
nope no change
can i send you the repo
and cna you check
Kaz Baig
@kbaig
Jan 14 14:25 UTC
I'm not familiar with react native sorry
Anand Potukuchi
@anandpotukchi
Jan 14 15:11 UTC
@Marmiz @cmccormack
@ezioda004
any help?
Christopher McCormack
@cmccormack
Jan 14 15:20 UTC
is your componentDidMount actually in a React component?
Anand Potukuchi
@anandpotukchi
Jan 14 15:20 UTC
wghat do you mean
@cmccormack
Christopher McCormack
@cmccormack
Jan 14 15:21 UTC
if your method isn't actually on a React component, then this may not have a setState method
Anand Potukuchi
@anandpotukchi
Jan 14 15:21 UTC
const endpoint = 'https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty';

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Container, Content, Card, CardItem, Body, Left, Right, Icon} from 'native-base';
import Story from '../Story';
import axios from 'axios';

export default class StoriesTab extends React.Component {

    constructor(props){
        super(props);
        this.state={
            title:'',
            url:'',
            author: 'Anand',
            upvotes: 0,
            comments: [],
            numberOfComments: 0
        }
    }


    componentDidMount() {

        axios
        .get(endpoint)
        .then(function(response){
            const author = response[0].by;
            console.log(author);
               this.setState({
                author: author
            });
        }.bind(this))

    }

render() {
    return(
       <> 
        <Story author = {this.state.author } />
       </>
   ); 
};
}




 const styles = StyleSheet.create({

    title: {
      fontSize: 16,
      paddingBottom: 20,
    },

    author: {
        color: '#FFAE19'
    },

    link: {
        fontSize: 12,
        color: '#ccc'
    },



  });
Christopher McCormack
@cmccormack
Jan 14 15:24 UTC
did you actually do what @kbaig suggested? you are using an anonymous function which I believe has it's own this in your axios callback - try changing that to an arrow function or capturing this outside your axios call within componentDidMount
@anandpotukchi btw saying "nope no change" is not good feedback, how are we to know exactly how you implemented the suggestion unless you share the updated code that didn't work?
and please try to only share the important code, not a big wall of text - if you want to share the whole component you can paste it on another site and share the link
Anand Potukuchi
@anandpotukchi
Jan 14 15:27 UTC
@cmccormack sorry about that. I know
but i idnt get what you asked so...
was a rookie msitake though
admittrd
Christopher McCormack
@cmccormack
Jan 14 15:27 UTC

try changing

.then(function(response){

to

.then( response => {
Anand Potukuchi
@anandpotukchi
Jan 14 15:29 UTC
  componentDidMount() {

        axios
        .get(endpoint)
        .then( response => {
            const author = response.by;
            console.log(author);
               this.setState({
                author: author
            });
        }).bind(this)
    }
where do you want me to add the binding
Christopher McCormack
@cmccormack
Jan 14 15:31 UTC
nowhere
don't think you need that
Anand Potukuchi
@anandpotukchi
Jan 14 15:31 UTC
yeah not throwing errors now
but sint giving any result either
{
  "by" : "tel",
  "descendants" : 16,
  "id" : 121003,
  "kids" : [ 121016, 121109, 121168 ],
  "score" : 25,
  "text" : "<i>or</i> HN: the Next Iteration<p>I get the impression that with Arc being released a lot of people who never had time for HN before are suddenly dropping in more often. (PG: what are the numbers on this? I'm envisioning a spike.)<p>Not to say that isn't great, but I'm wary of Diggification. Between links comparing programming to sex and a flurry of gratuitous, ostentatious  adjectives in the headlines it's a bit concerning.<p>80% of the stuff that makes the front page is still pretty awesome, but what's in place to keep the signal/noise ratio high? Does the HN model still work as the community scales? What's in store for (++ HN)?",
  "time" : 1203647620,
  "title" : "Ask HN: The Arc Effect",
  "type" : "story"
}
this is the json
anything wrong in my call? @cmccormack
?
Kaz Baig
@kbaig
Jan 14 15:38 UTC
He seemed to be saying react native doesn't support arrow functions
Anand Potukuchi
@anandpotukchi
Jan 14 15:40 UTC
@kbaig whoo
Christopher McCormack
@cmccormack
Jan 14 15:40 UTC
it's all ran through babel isn't it?
Anand Potukuchi
@anandpotukchi
Jan 14 15:40 UTC
yes
i used CRNA
so am guessing i mdidnt miss any deps
any problems
Christopher McCormack
@cmccormack
Jan 14 15:46 UTC

@anandpotukchi

but sint giving any result either

Are you saying it isn't logging response.by to console?

Anand Potukuchi
@anandpotukchi
Jan 14 15:55 UTC
Yes
I'll check again
Christopher McCormack
@cmccormack
Jan 14 16:01 UTC
@anandpotukchi make sure to put a catch back on there to log any errors as well
Anand Potukuchi
@anandpotukchi
Jan 14 16:14 UTC

    componentDidMount() {

        axios
        .get(endpoint)
        .then( response => {
            const author = response.by;
            console.log(author);
               this.setState({
                author: author
            }); 
        })  
        .catch(function (error) {
            resultElement.innerHTML = generateErrorHTMLOutput(error);
          });  
    }
@cmccormack
Christopher McCormack
@cmccormack
Jan 14 16:20 UTC
@anandpotukchi ok so is it all working?
Anand Potukuchi
@anandpotukchi
Jan 14 16:21 UTC
n/o
no error either
Christopher McCormack
@cmccormack
Jan 14 16:23 UTC
try logging both the error and the full response object in the catch and then callbacks, respectively, before adding additional methods that add complexity
Anand Potukuchi
@anandpotukchi
Jan 14 16:28 UTC
only problem, i don't know here to check logs
Kaz Baig
@kbaig
Jan 14 16:29 UTC
Do you not have a terminal running?
How did you use CRNA
Anand Potukuchi
@anandpotukchi
Jan 14 16:29 UTC
i hav a terminal
and htere's no kind of stuff there
okay i see erros
only fs.watch()
Anand Potukuchi
@anandpotukchi
Jan 14 16:43 UTC
@cmccormack returning undefined
alpox
@alpox
Jan 14 16:44 UTC
@anandpotukchi your data should be in response.data.by
And not response.by
Unless you changed the axios defaults
Christopher McCormack
@cmccormack
Jan 14 16:45 UTC
axios adds data to response?
is response the raw response?
Mark Pearyer
@marcusp619
Jan 14 16:45 UTC
just console log response
to check where the data lives
alpox
@alpox
Jan 14 16:45 UTC
@cmccormack yes. The response object contains metadata additional to the data as well like the response status, response headers etc.
Anand Potukuchi
@anandpotukchi
Jan 14 16:45 UTC
yup. thanks @alpox
Mark Pearyer
@marcusp619
Jan 14 16:46 UTC
normally it would be in a data key-value pair
@anandpotukchi to clean up your code a little bit you could use async await.
Anand Potukuchi
@anandpotukchi
Jan 14 16:47 UTC
@marcusp619 something which i dont udersatnd yet
:cry:
Mark Pearyer
@marcusp619
Jan 14 16:48 UTC
no worries something to study later, if you did you could do the same code in about 2-3 lines of code.
alpox
@alpox
Jan 14 16:48 UTC
@anandpotukchi no worries. You can still learn it later and now go with normal promise patterns
Mark Pearyer
@marcusp619
Jan 14 16:48 UTC
im sure freecodecamp has a blog post on async/await
alpox
@alpox
Jan 14 16:48 UTC
@marcusp619 in this case its not so much less as you'd need a try/catch block
Mark Pearyer
@marcusp619
Jan 14 16:49 UTC
@alpox true
alpox
@alpox
Jan 14 16:49 UTC
@anandpotukchi but you can shorten { author: author } to just { author }
Anand Potukuchi
@anandpotukchi
Jan 14 16:50 UTC
@alpox what if use multiple
{author, title}
alpox
@alpox
Jan 14 16:50 UTC
@anandpotukchi add them with comma, yes
Anand Potukuchi
@anandpotukchi
Jan 14 16:50 UTC
does it still work
alpox
@alpox
Jan 14 16:50 UTC
Yuo works
Anand Potukuchi
@anandpotukchi
Jan 14 16:50 UTC
thanks
alpox
@alpox
Jan 14 16:51 UTC
You can shorten it whenever the variable name is the same as the key name you want to assign
So every xy: xy collapses to just xy
Mark Pearyer
@marcusp619
Jan 14 16:51 UTC
believe it was brought in es6 called 'Object Initialization’ if you want to look it up
It doesnt really have a name. Its just a new literal syntax for objects
May Kittens Devour Your Soul
@diomed
Jan 14 17:31 UTC
@cmccormack H A N G M A N ?
Christopher McCormack
@cmccormack
Jan 14 17:31 UTC
sure
May Kittens Devour Your Soul
@diomed
Jan 14 17:31 UTC
_ _ _ _ P _ _ _
Jose Pagan
@josepagan
Jan 14 17:31 UTC
@marcusp619 I have the You Dont Know JS book: Async & Performance in front of me. :D
Christopher McCormack
@cmccormack
Jan 14 17:33 UTC
S
May Kittens Devour Your Soul
@diomed
Jan 14 17:34 UTC
_ _ _ _ P _ _ S
Christopher McCormack
@cmccormack
Jan 14 17:34 UTC
H
May Kittens Devour Your Soul
@diomed
Jan 14 17:35 UTC
naH
Christopher McCormack
@cmccormack
Jan 14 17:36 UTC
N
May Kittens Devour Your Soul
@diomed
Jan 14 17:37 UTC
NaN
Christopher McCormack
@cmccormack
Jan 14 17:38 UTC
impossible!
L
May Kittens Devour Your Soul
@diomed
Jan 14 17:39 UTC
_ _ L _ P _ _ S
Levis
@agabyte
Jan 14 17:44 UTC
o
May Kittens Devour Your Soul
@diomed
Jan 14 17:44 UTC
nO
Levis
@agabyte
Jan 14 17:45 UTC
E
May Kittens Devour Your Soul
@diomed
Jan 14 17:46 UTC
_ _ L _ P E _ S
Christopher McCormack
@cmccormack
Jan 14 17:46 UTC
R as in Riboflavin
May Kittens Devour Your Soul
@diomed
Jan 14 17:47 UTC
_ _ L _ P E R S
Ariel
@ArielLeslie
Jan 14 17:48 UTC
H as in Helicopter
oh, already said
Levis
@agabyte
Jan 14 17:49 UTC
i
Christopher McCormack
@cmccormack
Jan 14 17:49 UTC
CALIPERS
May Kittens Devour Your Soul
@diomed
Jan 14 17:49 UTC
haha
legend
:congratulations: @cmccormack :tada: :ballot_box_with_check:
@ArielLeslie did you like my PM?
Ariel
@ArielLeslie
Jan 14 17:50 UTC
lemme go look.
ummmmmm.....wut? :laughing:
May Kittens Devour Your Soul
@diomed
Jan 14 17:52 UTC
:yum:
I honestly dont know
Ariel
@ArielLeslie
Jan 14 17:54 UTC
Firefly only got one season, but someone greenlit that.
May Kittens Devour Your Soul
@diomed
Jan 14 17:54 UTC
there are no rules
in this world
@ArielLeslie what was your fav. episode
Ariel
@ArielLeslie
Jan 14 17:56 UTC
Maybe Jaynestown
Because Jayne is awesome
May Kittens Devour Your Soul
@diomed
Jan 14 17:57 UTC
that was a weird one
Ariel
@ArielLeslie
Jan 14 17:57 UTC
Also now I have the "A man they call Jayne" stuck in my head.
May Kittens Devour Your Soul
@diomed
Jan 14 17:57 UTC
I very much like the one with girl thief. I remember it vaguely, but I remember snow house in the end ...
Ariel
@ArielLeslie
Jan 14 17:58 UTC
The one with Malcom's "wife" is also a favorite
yeah. that one.
May Kittens Devour Your Soul
@diomed
Jan 14 17:59 UTC
yup yup yup! best one, for me
altho never watched in proper order
very confusing
Ariel
@ArielLeslie
Jan 14 18:08 UTC
I've only been able to watch Serenity a couple times. Usually too emotionally traumatic for me.
Angel
@angelparkour499
Jan 14 18:08 UTC
@Recelis Yeah, but, i want it to get background color when i scroll down
Like the walmart nav bar
The background is transparent and when you scroll down, gets the actual background-color of the nav bar