These are chat archives for FreeCodeCamp/Help

14th
Jan 2019
Angel
@angelparkour499
Jan 14 00:25
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
@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
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
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
nvm got it working
Zaza
@ForkInSpace
Jan 14 10:50
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
what is the fastst and shortest way to learn async/await
Aditya
@ezioda004
Jan 14 13:25
Learn promises.
May Kittens Devour Your Soul
@diomed
Jan 14 13:26
future is promises
Anand Potukuchi
@anandpotukchi
Jan 14 13:38
@ezioda004 where is thee question
fastest tutoril
Anand Potukuchi
@anandpotukchi
Jan 14 13:54
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
@anandpotukchi console log this.state.author in Stories and see if you're getting anything
Anand Potukuchi
@anandpotukchi
Jan 14 14:15
@kbaig o BTW where do icheckfor the console in vscode
Kaz Baig
@kbaig
Jan 14 14:16
in the terminal
or the browser
Anand Potukuchi
@anandpotukchi
Jan 14 14:17
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
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
@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
Again, try logging response.data to see if you're getting what you expect
Anand Potukuchi
@anandpotukchi
Jan 14 14:22
this.seTstate is not defined
Kaz Baig
@kbaig
Jan 14 14:22
change the callback to an arrow function and it will be
Anand Potukuchi
@anandpotukchi
Jan 14 14:22
its a react natvie app
Kaz Baig
@kbaig
Jan 14 14:23
But you have an arrow function in the catch
Anand Potukuchi
@anandpotukchi
Jan 14 14:23
removed the catch
Kaz Baig
@kbaig
Jan 14 14:23
then store this as a variable above the axios call
Anand Potukuchi
@anandpotukchi
Jan 14 14:24
how
Kaz Baig
@kbaig
Jan 14 14:24
const _this = this;
...
_this.setState(...);
Anand Potukuchi
@anandpotukchi
Jan 14 14:25
nope no change
can i send you the repo
and cna you check
Kaz Baig
@kbaig
Jan 14 14:25
I'm not familiar with react native sorry
Anand Potukuchi
@anandpotukchi
Jan 14 15:11
@Marmiz @cmccormack
@ezioda004
any help?
Christopher McCormack
@cmccormack
Jan 14 15:20
is your componentDidMount actually in a React component?
Anand Potukuchi
@anandpotukchi
Jan 14 15:20
wghat do you mean
@cmccormack
Christopher McCormack
@cmccormack
Jan 14 15:21
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
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
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
@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

try changing

.then(function(response){

to

.then( response => {
Anand Potukuchi
@anandpotukchi
Jan 14 15:29
  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
nowhere
don't think you need that
Anand Potukuchi
@anandpotukchi
Jan 14 15:31
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
He seemed to be saying react native doesn't support arrow functions
Anand Potukuchi
@anandpotukchi
Jan 14 15:40
@kbaig whoo
Christopher McCormack
@cmccormack
Jan 14 15:40
it's all ran through babel isn't it?
Anand Potukuchi
@anandpotukchi
Jan 14 15:40
yes
i used CRNA
so am guessing i mdidnt miss any deps
any problems
Christopher McCormack
@cmccormack
Jan 14 15:46

@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
Yes
I'll check again
Christopher McCormack
@cmccormack
Jan 14 16:01
@anandpotukchi make sure to put a catch back on there to log any errors as well
Anand Potukuchi
@anandpotukchi
Jan 14 16:14

    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
@anandpotukchi ok so is it all working?
Anand Potukuchi
@anandpotukchi
Jan 14 16:21
n/o
no error either
Christopher McCormack
@cmccormack
Jan 14 16:23
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
only problem, i don't know here to check logs
Kaz Baig
@kbaig
Jan 14 16:29
Do you not have a terminal running?
How did you use CRNA
Anand Potukuchi
@anandpotukchi
Jan 14 16:29
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
@cmccormack returning undefined
alpox
@alpox
Jan 14 16:44
@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
axios adds data to response?
is response the raw response?
Mark Pearyer
@marcusp619
Jan 14 16:45
just console log response
to check where the data lives
alpox
@alpox
Jan 14 16:45
@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
yup. thanks @alpox
Mark Pearyer
@marcusp619
Jan 14 16:46
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
@marcusp619 something which i dont udersatnd yet
:cry:
Mark Pearyer
@marcusp619
Jan 14 16:48
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
@anandpotukchi no worries. You can still learn it later and now go with normal promise patterns
Mark Pearyer
@marcusp619
Jan 14 16:48
im sure freecodecamp has a blog post on async/await
alpox
@alpox
Jan 14 16:48
@marcusp619 in this case its not so much less as you'd need a try/catch block
Mark Pearyer
@marcusp619
Jan 14 16:49
@alpox true
alpox
@alpox
Jan 14 16:49
@anandpotukchi but you can shorten { author: author } to just { author }
Anand Potukuchi
@anandpotukchi
Jan 14 16:50
@alpox what if use multiple
{author, title}
alpox
@alpox
Jan 14 16:50
@anandpotukchi add them with comma, yes
Anand Potukuchi
@anandpotukchi
Jan 14 16:50
does it still work
alpox
@alpox
Jan 14 16:50
Yuo works
Anand Potukuchi
@anandpotukchi
Jan 14 16:50
thanks
alpox
@alpox
Jan 14 16:51
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
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
@cmccormack H A N G M A N ?
Christopher McCormack
@cmccormack
Jan 14 17:31
sure
May Kittens Devour Your Soul
@diomed
Jan 14 17:31
_ _ _ _ P _ _ _
Jose Pagan
@josepagan
Jan 14 17:31
@marcusp619 I have the You Dont Know JS book: Async & Performance in front of me. :D
Christopher McCormack
@cmccormack
Jan 14 17:33
S
May Kittens Devour Your Soul
@diomed
Jan 14 17:34
_ _ _ _ P _ _ S
Christopher McCormack
@cmccormack
Jan 14 17:34
H
May Kittens Devour Your Soul
@diomed
Jan 14 17:35
naH
Christopher McCormack
@cmccormack
Jan 14 17:36
N
May Kittens Devour Your Soul
@diomed
Jan 14 17:37
NaN
Christopher McCormack
@cmccormack
Jan 14 17:38
impossible!
L
May Kittens Devour Your Soul
@diomed
Jan 14 17:39
_ _ L _ P _ _ S
Levis
@agabyte
Jan 14 17:44
o
May Kittens Devour Your Soul
@diomed
Jan 14 17:44
nO
Levis
@agabyte
Jan 14 17:45
E
May Kittens Devour Your Soul
@diomed
Jan 14 17:46
_ _ L _ P E _ S
Christopher McCormack
@cmccormack
Jan 14 17:46
R as in Riboflavin
May Kittens Devour Your Soul
@diomed
Jan 14 17:47
_ _ L _ P E R S
Ariel
@ArielLeslie
Jan 14 17:48
H as in Helicopter
oh, already said
Levis
@agabyte
Jan 14 17:49
i
Christopher McCormack
@cmccormack
Jan 14 17:49
CALIPERS
May Kittens Devour Your Soul
@diomed
Jan 14 17:49
haha
legend
:congratulations: @cmccormack :tada: :ballot_box_with_check:
@ArielLeslie did you like my PM?
Ariel
@ArielLeslie
Jan 14 17:50
lemme go look.
ummmmmm.....wut? :laughing:
May Kittens Devour Your Soul
@diomed
Jan 14 17:52
:yum:
I honestly dont know
Ariel
@ArielLeslie
Jan 14 17:54
Firefly only got one season, but someone greenlit that.
May Kittens Devour Your Soul
@diomed
Jan 14 17:54
there are no rules
in this world
@ArielLeslie what was your fav. episode
Ariel
@ArielLeslie
Jan 14 17:56
Maybe Jaynestown
Because Jayne is awesome
May Kittens Devour Your Soul
@diomed
Jan 14 17:57
that was a weird one
Ariel
@ArielLeslie
Jan 14 17:57
Also now I have the "A man they call Jayne" stuck in my head.
May Kittens Devour Your Soul
@diomed
Jan 14 17:57
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
The one with Malcom's "wife" is also a favorite
yeah. that one.
May Kittens Devour Your Soul
@diomed
Jan 14 17:59
yup yup yup! best one, for me
altho never watched in proper order
very confusing
Ariel
@ArielLeslie
Jan 14 18:08
I've only been able to watch Serenity a couple times. Usually too emotionally traumatic for me.
Angel
@angelparkour499
Jan 14 18:08
@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