These are chat archives for FreeCodeCamp/Help

31st
Mar 2018
marktothcode
@marktothcode
Mar 31 2018 06:58
Hey guys, I'm struggling to set an LetsEncrypt SSL certificate up for my subdomain. I can post my nginx config in private.
Nazar
@IsaakNazar
Mar 31 2018 08:32
how to pass props to a child of a child component in React?
Manish Giri
@Manish-Giri
Mar 31 2018 08:43
@IsaakNazar pass props from parent to child 1, then from child 1 to child 2
the other commonly used way is Redux, and the new context API
Nazar
@IsaakNazar
Mar 31 2018 08:45
@Manish-Giri thanx, I've done it
CamperBot
@camperbot
Mar 31 2018 08:45
isaaknazar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6824 | @manish-giri |http://www.freecodecamp.org/manish-giri
Manish Giri
@Manish-Giri
Mar 31 2018 08:45
:+1:
Manish Giri
@Manish-Giri
Mar 31 2018 09:40
@IsaakNazar use <ReactModal> instead of <Modal>
const RecipeModal = (props) => (
  <ReactModal isOpen={props.showModal}
    onRequestClose={props.handleCloseModal}
    contentLabel="Good Example"
    ariaHideApp={false}>

    <h3>Modal Optional</h3>
    <button>Save</button>
    <button onClick={props.handleCloseModal}>Close</button>
  </ReactModal>
);
Nazar
@IsaakNazar
Mar 31 2018 09:47
@Manish-Giri wow. thank you so much :smile:
CamperBot
@camperbot
Mar 31 2018 09:47
isaaknazar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6825 | @manish-giri |http://www.freecodecamp.org/manish-giri
Manish Giri
@Manish-Giri
Mar 31 2018 09:48
:+1:
tip - always look at the console for possible errors when something isn't working as expected
in this case it didn't know what Modal was
Nazar
@IsaakNazar
Mar 31 2018 09:51
@Manish-Giri on local server Modal works as expected, and I thought that there 's problem with codepen
Manish Giri
@Manish-Giri
Mar 31 2018 09:51
because here you can't do import Modal from 'react-modal'
Nazar
@IsaakNazar
Mar 31 2018 09:54
@Manish-Giri okay, got it :+1:
May Kittens Devour Your Soul
@diomed
Mar 31 2018 10:21
@Manish-Giri make me a modal
@IsaakNazar make me a modal
Henry
@GitHub-Henry
Mar 31 2018 10:28
@thekholm80 I found this to be a good resource for regex
Nazar
@IsaakNazar
Mar 31 2018 11:37
@diomed
In an hour
Sunflower
May Kittens Devour Your Soul
@diomed
Mar 31 2018 11:46
:sunflower:
Nazar
@IsaakNazar
Mar 31 2018 12:12
hey Campers, I'm on Recipe Box project. So I have a Component , and how to implement the code when a user clicks delete, should I delete entire component, or store each element in an array and delete only array?
   <div>
      <h2>Title</h2>
       Ingredients
     <ul>
       <li>Onion<li/>
        <li>Sunflower<li/>
    </ul>
  <button>Delete</button>
<button>Edit</button>
</div>
maybe are there more simpler way?
Stephen James
@sjames1958gm
Mar 31 2018 12:19
@IsaakNazar Aren't you building the components from stored state? You wouldn't have hardcoded onion or Sunflower? The ingredients would be in an array which delete would update
Nazar
@IsaakNazar
Mar 31 2018 12:23

@sjames1958gm
my array looks like

var recipe =
[
  {
    title: 'Some Title',
    ingredients: ['One', 'Two', 'Three']
  }
];

but how to delete entire div when click delete , or I should delete the component?

Stephen James
@sjames1958gm
Mar 31 2018 12:24
@IsaakNazar What is delete supposed to remove? The whole recipe?
Nazar
@IsaakNazar
Mar 31 2018 12:24
@sjames1958gm Yes, including buttons
Stephen James
@sjames1958gm
Mar 31 2018 12:26
@IsaakNazar Well, assuming you create the components from the array, when you change the array by changing the state where the array is stored
Then the component will re-render and when you render the new array the recipe will be gone and so you won't create the components on re-render
Nazar
@IsaakNazar
Mar 31 2018 12:30
@sjames1958gm so I need to store component in an array?
var recipe =
[
  {
    title: 'Some Title',
    ingredients: ['One', 'Two', 'Three'],
    delete: function() {"delete entire recipe"},
    edit: function() {"edit recipe"}
  }
];
Stephen James
@sjames1958gm
Mar 31 2018 12:33

@IsaakNazar
No, your code should generate your components from the array contents.

   render() {
     return (
        <div>
           { recipe.map((r) => <h1>{r.title}</h1>)}
        </div>
    )}

Obviously more work needed here, but if you generate your components from your array like this, when you remove the recipe from the array
The next render will not render that recipe

Amit Patel
@AmitP88
Mar 31 2018 12:35

hey guys, I'm working on making my pomodoro responsive, but on mobile my headings aren't showing up and I don't know why

demo: https://amitp88.github.io/Pomodoro-Timer/
repo: https://github.com/AmitP88/Pomodoro-Timer/tree/gh-pages

when I view the demo page on my phone, the headings are completely cut-off
Nazar
@IsaakNazar
Mar 31 2018 12:36
@sjames1958gm thanx, let's get started
CamperBot
@camperbot
Mar 31 2018 12:36
isaaknazar sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9151 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 31 2018 12:37
@IsaakNazar :+1: Your data drives your components so when your data changes your components render differently
Nazar
@IsaakNazar
Mar 31 2018 12:44
@AmitP88 hey Amit, you can check your heading on devtools, click on the device toolbar. Did you use css @media?
Amit Patel
@AmitP88
Mar 31 2018 12:44
@IsaakNazar yeah, i've been playing around with it on devtools, and the headings show up perfectly even on mobile view in dev tools, but when I check on my actual phone, the headings are cutoff
app.png
Nazar
@IsaakNazar
Mar 31 2018 12:45
@AmitP88 what is your phone model?
Amit Patel
@AmitP88
Mar 31 2018 12:45
@IsaaNazar HTC One M8
Nazar
@IsaakNazar
Mar 31 2018 12:54
@AmitP88 I would use css media query
Amit Patel
@AmitP88
Mar 31 2018 12:55
@IsaakNazar hmmm ok. I was hoping to avoid using that because it would essentially only be for the heading font, but I guess I should. I also tried using vw for font-size, but it would make the heading too small on larger screen sizes. Perhaps I need to combine the two
Amit Patel
@AmitP88
Mar 31 2018 13:19
@IsaakNazar thanks bro lol I almost forgot to give you some brownie points haha
CamperBot
@camperbot
Mar 31 2018 13:19
amitp88 sends brownie points to @isaaknazar :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @isaaknazar |http://www.freecodecamp.org/isaaknazar
Nazar
@IsaakNazar
Mar 31 2018 13:28
@AmitP88 did you fix that?
Amit Patel
@AmitP88
Mar 31 2018 13:28
@IsaakNazar not yet. I'm taking a break for now lol
Kyle Holm
@thekholm80
Mar 31 2018 16:09
@IsaakNazar did you look at the console?
Nazar
@IsaakNazar
Mar 31 2018 16:10
@thekholm80 well, on my local server works perfectly, without errors
Kyle Holm
@thekholm80
Mar 31 2018 16:10
codepen isn't your local server
all the import stuff gets done behind the scenes, you can't use it in codepen
Nazar
@IsaakNazar
Mar 31 2018 16:13
@thekholm80 oh sh*t, didn't notice that I make this mistake twice :smile:
@thekholm80 thanx
CamperBot
@camperbot
Mar 31 2018 16:13
isaaknazar sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1758 | @thekholm80 |http://www.freecodecamp.org/thekholm80
Kyle Holm
@thekholm80
Mar 31 2018 16:15
@IsaakNazar :+1:
Nazar
@IsaakNazar
Mar 31 2018 16:19
@thekholm80 Kyle, I have 1 problem, when I click on the title, only ingredients of that title should be hidden, but instead other ingredients also becoming hidden
Kyle Holm
@thekholm80
Mar 31 2018 16:22
@IsaakNazar do you use a single piece of state to determine whether or not the components should be shown?
Nazar
@IsaakNazar
Mar 31 2018 16:23
@thekholm80 yes, state.display
Kyle Holm
@thekholm80
Mar 31 2018 16:24
so, how does each recipe know when to show/hide?
is there ever a condition where one would be shown and the other not?
or, when you hide one does it change the single piece of state controlling all of them?
Nazar
@IsaakNazar
Mar 31 2018 16:25
there's no conditions, and no conditions
ok I'll try then
Kyle Holm
@thekholm80
Mar 31 2018 16:27
one thing you might try is to abstract each recipe into it's own component and allow it to control it's own state
you could then use something like this.state.recipes.map() in your <Recipes /> component to create each child
Nazar
@IsaakNazar
Mar 31 2018 16:31
@thekholm80 hmm, not bad idea, thanx :+1:
CamperBot
@camperbot
Mar 31 2018 16:31
isaaknazar sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
api offline
Nazar
@IsaakNazar
Mar 31 2018 16:54
@thekholm80 can I toggle only specific element using argument?
toggleDisplay(ingredientToHide) { //is it possible to use this argument to toggle only specific element?
    this.setState( (prev) => ({
      display: !this.state.display
    }));
  }
Kyle Holm
@thekholm80
Mar 31 2018 16:55
it's possible, but if all of your ingredients are using this.state.display in the same component to determine whether to show/hide, you're not going to see the results you want
Nazar
@IsaakNazar
Mar 31 2018 16:56
@thekholm80
I found a code, where user can delete specific element , and maybe I can implement this code to my code
handleRemoveOption = (optionToRemove) => {
    this.setState( (prev) => ({
      options: prev.options.filter(op => optionToRemove !== op)
    }));
  }
Stephen James
@sjames1958gm
Mar 31 2018 20:33

@IsaakNazar If your recipe is an object in an array with a display property.

handleHideIngredients = (id) => {
   this.setState(prevState => ({
       recipes: prev.recipes.map(recipe => (
             recipe.id !== id ? recipe : {...recipe, display: !recipe.display})
})

So you remap the array (so you don't mutate the array in state) and you rebuild the changed recipe object (so the object in the array isn't mutated either)

Henry
@GitHub-Henry
Mar 31 2018 23:45