These are chat archives for FreeCodeCamp/Help

7th
Jan 2019
Niraj Nandish
@Nirajn2311
Jan 07 04:15
@GitHub-Henry thats on my list of things to learn this year :laughing:
@diomed you said word was in spanish 😑
ScripTech
@ScripTech
Jan 07 06:49
@diomed
psyperl
@psyperl
Jan 07 07:52
@diomed
May Kittens Devour Your Soul
@diomed
Jan 07 09:20
meow?
ScripTech
@ScripTech
Jan 07 09:20
@diomed Hi
May Kittens Devour Your Soul
@diomed
Jan 07 09:21
hi
ScripTech
@ScripTech
Jan 07 09:49
how are you Captain
Anand Potukuchi
@anandpotukchi
Jan 07 09:49

I AM THE CAPTAIN

ScripTech
@ScripTech
Jan 07 09:50
:worried:
@anandpotukchi Are you?
Anand Potukuchi
@anandpotukchi
Jan 07 09:52
@ScripTech YES
Aditya
@ezioda004
Jan 07 09:52
:skull: :crossed_flags:
ScripTech
@ScripTech
Jan 07 09:53
@diomed
abraham anak agung
@padunk
Jan 07 10:03
Evening folks. Question for you who have kids (or going to have one in the future), what is the best age for kids to learn programming?
ScripTech
@ScripTech
Jan 07 10:04
I think at 12 years old
Anand Potukuchi
@anandpotukchi
Jan 07 10:04
@padunk better question, are they inclined towards it
I'd say around 13
abraham anak agung
@padunk
Jan 07 10:05
@anandpotukchi idk, but sometimes kids don't know what they want, just like us :smile:
ScripTech
@ScripTech
Jan 07 10:07
@padunk y rth .. but at 12 it's time to play arround sme new staffs
Anand Potukuchi
@anandpotukchi
Jan 07 10:07
@padunk don't force them though - they'd hate you later
@padunk and you can start with Scratch
abraham anak agung
@padunk
Jan 07 10:10
Thanks @ScripTech and @anandpotukchi , yeah, definitely Scratch 3.0. It is fun to make program with it.
ScripTech
@ScripTech
Jan 07 10:10
welcome
Anand Potukuchi
@anandpotukchi
Jan 07 10:13
@padunk Anytime
Amit Patel
@AmitP88
Jan 07 10:20
hey guys, do you think I should redo this website? http://www.khmerfamilycafe.com/ I made it 2 years ago. I'm wondering if this will look bad when looking for a job
ScripTech
@ScripTech
Jan 07 10:22
@AmitP88 Yes... adpt to new design trends
Amit Patel
@AmitP88
Jan 07 10:23
@ScripTech Will do. Thanks
May Kittens Devour Your Soul
@diomed
Jan 07 10:26
Why can't we computer scientists get research projects that involve consuming alcohol?
Amit Patel
@AmitP88
Jan 07 10:29
that would be nice
abraham anak agung
@padunk
Jan 07 10:36
@diomed Cause it could make you end up in jail. This tweet is really inspiring for me.
BuntyBru
@BuntyBru
Jan 07 11:09

hey guys
I have to prepare a quiz

Can you mention some tough CSS questions

?
6 questions would do it
BuntyBru
@BuntyBru
Jan 07 11:15
I can get the questions from web
But again i want practical questions
problems we see daily while working and take a lot of time to find it on the internet
Kranti Nebhwani
@darkphotonKN
Jan 07 11:25
How do I get the data to be 'ready' before I try access it's properties ? I'm used to async await or promises but that's when I fetch the request in the first place - after it's fetched and awaited the { this.state.x.map } seems to still log undefined as if the data is not ready, is it firing before the await is done, hence finding undefined? This is an example of where it's happening, notice that I have stored the data in state with async / await and i can log the data fine, but inside the JSX in render() it returns undefined:
class Header extends Component {
  state = {
    data: []
  };

  async componentDidMount() {
    const { data } = await axios.get('/api/content/HomeBanner');

    this.setState({ data });
  }

  render() {
    return (
      <div>
        <div className="row">
          {/* UNDEFINED */}
          {this.state.data.Content.map((obj) => (
            <ul>
              <li>{obj.Title}</li>
            </ul>
          ))}
        </div>
        <MainNav />
      </div>
    );
  }
}

export default Header;
Kaz Baig
@kbaig
Jan 07 11:35
@darkphotonKN are you sure the response has a data attr
don't forget to add a key btw
Kranti Nebhwani
@darkphotonKN
Jan 07 11:39
@kbaig yep, and it has to cuz that's how axios "sorts" his responses, it puts it in a data property inside the response
Kaz Baig
@kbaig
Jan 07 11:40
@darkphotonKN ah ok I use fetch
Kranti Nebhwani
@darkphotonKN
Jan 07 11:40
so basically im doing response.data there, and insdie that is what my backend guy wrote. the problem now is it works when i just log it - there's stuff in it. But i think somehow the render is trying to access the stuff before the contents are ready
but I already awaited the async operation to complete before storing it in the state
Kaz Baig
@kbaig
Jan 07 11:41
It should render once with this.state.data being [] and then again after this.setState is called
Kranti Nebhwani
@darkphotonKN
Jan 07 11:42
@kbaig so is the this.state.data.Content.map running first?
Kaz Baig
@kbaig
Jan 07 11:42
What happens if you log this.state at the top of the render function?
Could you paste that in
Kranti Nebhwani
@darkphotonKN
Jan 07 11:42
im on it
{ data: [] }
@kbaig
but then componentDidMount() shoiuld run no?
as it's mounted, and it got the data there
or it tries to map first?
Kaz Baig
@kbaig
Jan 07 11:44
oh you know what
Is data an array or is Content the array
Kranti Nebhwani
@darkphotonKN
Jan 07 11:45
content
Kaz Baig
@kbaig
Jan 07 11:46
then you should change cDM to
const { data } = await axios.get('/api/content/HomeBanner');
const { Content } = data;

    this.setState({ Content });
have you state be this.state = { Content: [] }
And then in your render, map this.state.Content
Kranti Nebhwani
@darkphotonKN
Jan 07 11:47
@kbaig ah ok thanks man! can you explain why i can't access a property of data like data.Content?
why is it slow
to load in that way
Kaz Baig
@kbaig
Jan 07 11:47
I don't think speed is your issue
In your constructor, you're defining data as an array
Alternatively, you could set your state initially as this.state = { data: { Content: [] } }
This message was deleted
Aditya
@ezioda004
Jan 07 12:29
You can just use promise inside I suppose, also that data will be a promise
I suppose you can do:
{ this.state.data.length === 0 
  ?  <div>Loading</div> 
  : this.state.data.Content.map((obj) => (
            <ul>
              <li>{obj.Title}</li>
            </ul>
          ))}
Kaz Baig
@kbaig
Jan 07 12:34
@ezioda004 Did you mean to say there would be some error associated with using async in that way
Because I use it that way and it seems fine
Aditya
@ezioda004
Jan 07 12:37
@kbaig Yeah I was thinking of something else, my bad
Kaz Baig
@kbaig
Jan 07 12:41
ah np
@ezioda004 Have you started working with hooks yet?
Aditya
@ezioda004
Jan 07 12:44
@kbaig I've looked at the API, its interesting
Waiting for it to be released then I'll play some more with it
Showed my boss and he was like "Wtf this is weird" :laughing:
What about you?
CoderOO7
@CoderOO7
Jan 07 12:46
can anyone tell what "promise" is here?
Kaz Baig
@kbaig
Jan 07 12:46
@ezioda004 I'm gonna start a gatsby project today - installed react@next in case state becomes relevant
@CoderOO7 It's a way to handle asynchronous operations
Aditya
@ezioda004
Jan 07 12:47
@kbaig Ah cool, what are your thoughts on hooks?
Kaz Baig
@kbaig
Jan 07 12:48
I haven't read through the documentation but I did watch all the videos from react conf on it. Looks dope
Aditya
@ezioda004
Jan 07 12:48
It does, I just hope they dont deprecate class components
Kaz Baig
@kbaig
Jan 07 12:49
I don't think they will. They said they envision this to be the future of react but don't plan on making future versions backwards incompatible
CoderOO7
@CoderOO7
Jan 07 12:49
@kbaig ohk
Kaz Baig
@kbaig
Jan 07 12:49
@ezioda004 Ryan Florence's talk really got me on board
Aditya
@ezioda004
Jan 07 12:52
Yeah that was a cool talk. Could be just me but I like class components because code looks nice and all encapsulated, with hooks it looks more procedural
Kaz Baig
@kbaig
Jan 07 12:53
I see what you're saying, but the fact that it's encapsulated in functions should make it components more usable
I still struggle with making my components reusable and I feel like Hooks will force me to do so more often
Aditya
@ezioda004
Jan 07 12:55
Maybe, making a reusable component with HOC is quite easy tho
Kaz Baig
@kbaig
Jan 07 12:55
I only just started thinking on HOCs and render functions lol
Aditya
@ezioda004
Jan 07 12:59
Takes time :P
Theres some challenges in codewars for React/HOCs if you wanna get more practice
Kaz Baig
@kbaig
Jan 07 13:00
I had no clue
hell yes
I'm still working on my first app so trying to make reusable components is still nw to me
Kaz Baig
@kbaig
Jan 07 13:11
@ezioda004 any collections you recommend?
Aditya
@ezioda004
Jan 07 13:13
@kbaig Codewars?
Kaz Baig
@kbaig
Jan 07 13:17
@ezioda004 cool thanks
33y3z
@33y3z
Jan 07 15:42
I need to reset my password for windows 8 , I have no disk drive and no access to another computer, and I have revision a18 bios on a Dell latitude e6430, please help
Kaz Baig
@kbaig
Jan 07 16:49
@ezioda004 btw I found a good solution to creating components that inherit style from others - styled components has a good way to handle this
Christopher McCormack
@cmccormack
Jan 07 16:56
@kbaig is that using extend like this? That's an awesome feature, love SC
Kaz Baig
@kbaig
Jan 07 16:59
@cmccormack I believe that was the old way of doing it. Extending styles docs
Christopher McCormack
@cmccormack
Jan 07 17:00
yeah I think you're right, it's been a bit since I used SC
@kbaig hehe that's why you don't link directly to the latest dev version, my pen was totally broken now with no changes on my end
Kaz Baig
@kbaig
Jan 07 17:02
Oh I was wondering why I couldn't see anything
Christopher McCormack
@cmccormack
Jan 07 17:02
should work now :/
had to get rid of extend and make a few more changes
Kaz Baig
@kbaig
Jan 07 17:04
aha
nice
May Kittens Devour Your Soul
@diomed
Jan 07 19:47
did you know now you can have as much private repos on github as you want?
Jason Luboff
@JLuboff
Jan 07 19:49
...almost. Not live yet
May Kittens Devour Your Soul
@diomed
Jan 07 19:50
but only 3 collaborators
that's the catch
psyperl
@psyperl
Jan 07 19:55
strange behaviour
const testFunc = x => {
  console.log("before:", x)
  x[0][0].isEgg = true
  console.log("after:", x)
}

const templateCell = {isEgg: false}
const templateRow = [templateCell, templateCell]
const createEmptyField = () => [templateRow, templateRow]
// behave strangely
testFunc(createEmptyField())

const createEmptyField2 = () => 
  [
   [{isEgg: false},{isEgg: false}],
   [{isEgg: false},{isEgg: false}]
  ]
// behave as expected
testFunc(createEmptyField2())
Levis
@agabyte
Jan 07 19:55
why isn't the state's login property being updated after a loginAction dispatch?
var code = "formatted";
const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // change code below this line
  if(action.type == 'LOGIN'){ 
    state.login = true;  
  } 
  return state;
  // change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};

//var k = store.dispatch(loginAction());
//console.log(Object.keys(k))
Manish Giri
@Manish-Giri
Jan 07 20:03
@agabyte
 if(action.type == 'LOGIN'){ 
    state.login = true;  
  }
create and return a new state object with login set to true
return {...state, login: true};
psyperl
@psyperl
Jan 07 20:18
just discovered the js object is passed by reference wew
psyperl
@psyperl
Jan 07 20:28
I am such a noob in JS
Manish Giri
@Manish-Giri
Jan 07 20:31
isn't object pass by ref. in most languges
Levis
@agabyte
Jan 07 20:31
@Manish-Giri thanks
Manish Giri
@Manish-Giri
Jan 07 20:32
@agabyte :thumbsup:
psyperl
@psyperl
Jan 07 20:33
@Manish-Giri no idea really, this case got me surprised for sure
Manish Giri
@Manish-Giri
Jan 07 20:33
hm
well in js, objects, arrays, etc are pass by ref
psyperl
@psyperl
Jan 07 20:34
much simpler example
const testObj = {isEgg: false}
const testArr = [testObj, testObj]
testArr[0].isEgg = true
console.log(testArr) // both testArr[0] and testArr[1] will be true
yes that is good to know
I am not exactly passing it to the function .. just setting the array value to it.. I thought it will copied them
May Kittens Devour Your Soul
@diomed
Jan 07 20:38
@Manish-Giri you can have secret repos now
Manish Giri
@Manish-Giri
Jan 07 20:38
@diomed i saw that news
i already have a paid plan lol
May Kittens Devour Your Soul
@diomed
Jan 07 20:39
you're a reader, I see
Manish Giri
@Manish-Giri
Jan 07 20:39
unlimited repos
May Kittens Devour Your Soul
@diomed
Jan 07 20:39
:angry:
you're all pro -.-
Manish Giri
@Manish-Giri
Jan 07 20:39
i'll change back to the free plan
whats the point of it now if its free anyway
May Kittens Devour Your Soul
@diomed
Jan 07 20:40
do you even need it?
Manish Giri
@Manish-Giri
Jan 07 20:40
i do
:smiling_imp:
May Kittens Devour Your Soul
@diomed
Jan 07 20:40
well - on free plan only 3 collaborators can edit, no more
so... that's limit
psyperl
@psyperl
Jan 07 20:41
how many free collaborators in bitbucket?
Jason Luboff
@JLuboff
Jan 07 20:41
I want to say 5
but..I might just be pulling that out of my ass
May Kittens Devour Your Soul
@diomed
Jan 07 20:41
dont be gross
fox.gif
psyperl
@psyperl
Jan 07 20:49
@Manish-Giri and yes it passed by ref
const testObj = {isEgg: false}
const change = x => {
  x.isEgg = true
}

console.log(testObj) // { isEgg: false }
change(testObj)
console.log(testObj) // { isEgg: true }
thanks for assuring
May Kittens Devour Your Soul
@diomed
Jan 07 20:51
@Manish-Giri buy me world of tomorrow : 2
psyperl
@psyperl
Jan 07 20:51
that case is so very basic and i failed for it... #failedcoder
May Kittens Devour Your Soul
@diomed
Jan 07 20:52
basic coder
psyperl
@psyperl
Jan 07 22:23

well the problem is actually started because I uses the Array.fill

const generateObj = () => ({ prop: false })
const newArr = Array(10).fill(generateObj())
newArr[0].prop = true // will change all element's prop to true

turned out all 10 elements is having the same obj.. I was expecting that the generateObj be called on every element, but it was actually copied to all element

psyperl
@psyperl
Jan 07 22:28
so I mapped them instead to make each element to have it's own object which solves the problem
const correctDistObjArr = Array(10).fill(0).map ( _ => generateObj() )
correctDistObjArr[0].prop = true // should change only the first element to true