These are chat archives for FreeCodeCamp/Help

16th
Jan 2019
sasikala-tholisam
@sasikala-tholisam
Jan 16 06:51 UTC
hi,,I tried to clone https://manolo.github.io/crud-demo/index-valo.html into polymer 2.0 starter kit,I added few dependencies but unable to show CRUD opertions as shown in demo...can anyone help me?
psyperl
@psyperl
Jan 16 09:17 UTC
is this a good day to code?
Daniel Simeonov
@dbsimeonov
Jan 16 09:19 UTC
${props => props.clearMb &&`margin-bottom: 0;`}
Anything wrong in here for React?
abraham anak agung
@padunk
Jan 16 09:31 UTC
@dbsimeonov marginBottom: 0
Daniel Simeonov
@dbsimeonov
Jan 16 09:32 UTC
hmm let me try but I'm using styled-components and there was a similar example for the -
abraham anak agung
@padunk
Jan 16 09:32 UTC
but idk what that $ sign for, btw what are you trying to do?
Daniel Simeonov
@dbsimeonov
Jan 16 09:33 UTC
I style them with the library I mentioned, and have props from the parent component, rendering 3 buttons and last one should not have any margin and different color for ex
const CtaCall = props => (
    <Wrapper>
        <Cta href="{props.link}">
            {props.title}
        </Cta>
    </Wrapper>
)
const Cta = styled.a`
    display: block;
    margin: ${props => props.clearMb ? "0 auto 0" : "0 auto 100px"};
    ${props => props.primary &&`background: rgba(145, 232, 221, 1);`};
    ${props => props.secondary &&`background: rgba(56, 220, 200, 1);`};
    ${props => props.third &&`background: rgba(37, 147, 133, 1);`};
`;
abraham anak agung
@padunk
Jan 16 09:36 UTC
@dbsimeonov idk if you can access props inside styled-component like that. Is it working?
Daniel Simeonov
@dbsimeonov
Jan 16 09:36 UTC
should work, its from their docs
but as im absolutelly new with react wondered if there is something im missing :D
Claudio Restifo
@Marmiz
Jan 16 09:42 UTC
@dbsimeonov are you actually passing the prop?

just by looking at:

<Cta href="{props.link}">

I don't see any primary, secondary ...

Daniel Simeonov
@dbsimeonov
Jan 16 09:43 UTC
<CtaCall clearMb third link="www.google.com" title="commercial" />
psyperl
@psyperl
Jan 16 09:43 UTC
I have no idea how anonymous function passed in template literals would interpolate.. never seen that before
abraham anak agung
@padunk
Jan 16 09:44 UTC
I just started using it last week. Don't you need like :
const Cta = styled.a.attrs({
  margin: props => props.clearMb ? '0 auto 0' : '0 auto 100px;
})`
  // your style.
  margin: ${props => props.margin};
`;
Claudio Restifo
@Marmiz
Jan 16 09:44 UTC
@dbsimeonov but that's CtaCall, not Cta
you have to be explicit on which props to pass to children
Daniel Simeonov
@dbsimeonov
Jan 16 09:45 UTC
Cta is just defined to be able to style it inside CtaCall :D bad naming convesion I know
Claudio Restifo
@Marmiz
Jan 16 09:49 UTC

@dbsimeonov try

<Cta href="{props.link}" clearMb>

and see if it works :)

Daniel Simeonov
@dbsimeonov
Jan 16 09:51 UTC
It works inside the component, when I call it from outside clearMb doesn't seem to work. Let me see if I can give you better example

Cta.js

import React from 'react';
import styled from 'styled-components';

const Cta = props => (
    <Wrapper>
        <Anchor href="{props.link}">
            {props.title}
        </Anchor>
    </Wrapper>
)

const Wrapper = styled.div`display: block;text-align: center;`;

const Anchor = styled.a`
    display: block;
    margin: ${props => props.clearMb ? "0 auto 0" : "0 auto 100px"};
    ${props => props.primary &&`background: rgba(145, 232, 221, 1);`};
    ${props => props.secondary &&`background: rgba(56, 220, 200, 1);`};
    ${props => props.third &&`background: rgba(37, 147, 133, 1);`};
`;

export default Cta;

Parent

<Content>
    <Cta primary link="www.google.com" title="film" />
        <Cta secondary link="www.google.com" title="theather" />
        <Cta clearMb third link="www.google.com" title="commercial"/>
</Content>
Claudio Restifo
@Marmiz
Jan 16 09:57 UTC
@dbsimeonov the only prop you are passing to Anchor is href
Daniel Simeonov
@dbsimeonov
Jan 16 09:58 UTC
hmmm right, so I should pass something as a string, not possible just to call it like that
Claudio Restifo
@Marmiz
Jan 16 09:58 UTC
@dbsimeonov In React you have to be explicit about which props you pass to any child
the fact that a parent has a prop, doesn't means the child will have it too
psyperl
@psyperl
Jan 16 09:59 UTC
child don't inherit prop?
stingy parent
Daniel Simeonov
@dbsimeonov
Jan 16 10:00 UTC
lol alright, will try that now, also I saw on the docs that the same syntax I have for href="{props.link}" should work and in my case doesnt?
I can try to avoid those things simply removing the parent I think :D
Claudio Restifo
@Marmiz
Jan 16 10:04 UTC

@dbsimeonov what exactly is this?

href="{props.link}"

this in JS is a string with written {props.link}
If you want to pass some variable using jsx expression simply wrap it into curly

href={props.link}
Daniel Simeonov
@dbsimeonov
Jan 16 10:05 UTC
Fab, thanks a lot, now when I specified them inside the childs works perfect, really thanks a lot! @Marmiz
Claudio Restifo
@Marmiz
Jan 16 10:07 UTC

@dbsimeonov you know, in case all the props are necessary to a child you can always spread them:

const Parent = props => (<Children {...props} />)

Now Children will always have all the prop that are passed to Parent. Ofc be mindful of of unecessary re render

Daniel Simeonov
@dbsimeonov
Jan 16 10:09 UTC
lol excellent, works perfectlly
so this is if all the props are targeting only this parent/child element
Claudio Restifo
@Marmiz
Jan 16 10:11 UTC
@psyperl React components are just JS functions. and we all know (actually none knows) how inheritance works in JS
abraham anak agung
@padunk
Jan 16 10:12 UTC
@Marmiz I didn't see that one. Good caught. btw do you know how to render svg with props in react? This didn't seem to render
const Wrapper = () => (
  <div>
    <Icon srcImg='mySVG' />
  </div>
)

const Icon = ({srcImg}) => (
  <img src={`../images/${srcImg}.svg`} alt='some alt' />
)
Claudio Restifo
@Marmiz
Jan 16 10:17 UTC
@padunk is the path correct? Have you opened the console to see if there are errors?
abraham anak agung
@padunk
Jan 16 10:19 UTC
@Marmiz path is correct. No error on the console, but the svg didn't render. Oh i'm using gatsby btw.
Claudio Restifo
@Marmiz
Jan 16 10:23 UTC
you probably need a specific loader then
cos I assume Gatsby uses webpack to bundle your asset :)
abraham anak agung
@padunk
Jan 16 10:25 UTC
@Marmiz probably, is it a gatsby plug in?
Claudio Restifo
@Marmiz
Jan 16 10:26 UTC
what...
abraham anak agung
@padunk
Jan 16 10:26 UTC
the loader i mean. sorry I'm on mobile phone.
Claudio Restifo
@Marmiz
Jan 16 10:29 UTC

I don't know, sorry. I assume that Gatsby uses webpack. With Webpack you need a specific loader for SVG (i think) in order to bundle and import them if you want them in your asset file.

I don't know how Gatsby specifically handles static assets. Better luck on their doc page

abraham anak agung
@padunk
Jan 16 10:32 UTC
@Marmiz ok, no problem. I will look into it, Thank you.
psyperl
@psyperl
Jan 16 10:42 UTC
@Marmiz from the inheritance link you gave me, doesn't seems to say that child does not inherit the parent prop. and i tested normal JS class .. child always inherit the parent prop.. although.. child can improperly call the parent constructor improperly and missing the required param, then i think we are talking about incorrect property value instead of missing properties
psyperl
@psyperl
Jan 16 10:54 UTC
or am I talking about totally different things :smiley:
May Kittens Devour Your Soul
@diomed
Jan 16 17:02 UTC
I teach all my sweaters and hoodies about stranger danger
psyperl
@psyperl
Jan 16 17:10 UTC
heh.png
diomed @diomed purrrs
Oburusule Dunstan
@alsong
Jan 16 23:02 UTC
<div class="pro_ava_bottom">
    <form class="pro_ch_form" action="" method="post" enctype="multipart/form-data">
      <input type="file" name="pro_ch_ava" value="" id="pro_ch_ava" class="">
      <label for="pro_ch_ava" class="sec_btn">Upload avatar</label>
      <div class="pro_preview model-shadow">
        <div class="pro_pre_top">
          <div class="pro_pre_info">
            <span>Select this avatar</span>
          </div>
        </div>
        <div class="pro_pre_img">
          <img src="<?php echo DIR; ?>/images/needs/17455538fd839328f5606d284d0c360d.jpg" alt="">
        </div>
        <div class="pro_pre_bottom">
          <a href="#" class="sec_btn pro_pre_cancel">Cancel</a>
          <input type="submit" name="submit" value="Select" class="pri_btn pro_pre_select">
        </div>
      </div>
    </form>
    <div class="pro_ava_bottom_act">
      <a href="#" class="sec_btn">Cancel</a>
      <a href="#" class="pri_btn">Apply</a>
    </div>
  </div>
</div>

<div class="pro_crop model-shadow">

</div>

The snippet above is the form that i have created

form.on('submit', (function(e){
            e.preventDefault();
            $.ajax({
              url: '../ajaxify/ajax_requests/change_avatar.php',
              contentType: false,
              processData: false,
              dataType: "json",
              method: "POST",
              data: new FormData(this),
              success: function(data){

                var img_name = data.name;
                pro_avatar.fadeOut('fast');
                $('.overlay').show();
                blur.addBlur();
                $('.pro_crop_img > img').attr('src', '../temp/resized/Resized_'+ img_name);
                cropper.fadeIn('fast');
                if ($('.pro_crop_img > img').width() < 400) {
                  var hmm = $('.pro_crop_img > img').css('width');
                  $('.pro_crop_img').css('width', hmm+"px");
                }

                $('.pro_crop_cancel').on('click', function(e){
                  e.preventDefault();
                  cropper.fadeOut('fast');
                  $('.overlay').hide();
                  blur.removeBlur();
                  input.val('');
                  un.hide();
                  preview.hide();
                  cropper.hide();
                });

i dont know why the success part of the ajax is not working

Christopher McCormack
@cmccormack
Jan 16 23:04 UTC
Try adding the error property as well with a callback and see if you're hitting an error
@alsong
Jason Luboff
@JLuboff
Jan 16 23:07 UTC
Have you verified that the function is even running?
psyperl
@psyperl
Jan 16 23:07 UTC
wonder if contentType: false works with multipart/form-data
Oburusule Dunstan
@alsong
Jan 16 23:11 UTC
@JLuboff , its not working. but i dont know why because if i place an alert function before the ajax function it works but the ajax method doesnt
Jason Luboff
@JLuboff
Jan 16 23:11 UTC
Ok, ya i was refering to the initial function.
Oburusule Dunstan
@alsong
Jan 16 23:12 UTC
@psyperl what would you recommend
@cmccormack let me try it out
psyperl
@psyperl
Jan 16 23:13 UTC
I would follow what @cmccormack mentioned above first :point_up: January 17, 2019 6:04 AM