These are chat archives for FreeCodeCamp/HelpFrontEnd

29th
Sep 2018
Nerando Johnson
@Nerajno
Sep 29 2018 00:14
@AJ-Brommy .... thanks I got it fixed
AJ Brommy
@AJ-Brommy
Sep 29 2018 00:29
@Nerajno cool news :)
jtoloyede
@jtoloyede
Sep 29 2018 08:18
Hi guys, I'm new here.
I'm trying to use the mock URL "https://www.freecodecamp.com/email-submit" for form in the project "Product Landing Page" but I'm getting( Refused to display 'https://www.freecodecamp.org/email-submit?' in a frame because it set 'X-Frame-Options' to 'sameorigin'. ) as an error. Can someone please help me out?
Morchid Chellali
@Morched23MJ
Sep 29 2018 09:38

const inputStyle = {
  width: 235,
  margin: 5
}

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    // change code below this line
    this.state = {
      input: '',
      userAge: ''
    }
    // change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState({
      userAge: this.state.input
    });
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {buttonOne}
        {
          this.state.userAge != '' && this.state.userAge < 18 ? buttonThree : buttonTwo
        }
      </div>
    );
  }
};
Even though I set the condition this.state.userAge != '' within the render method, the buttonTwo/Three is still displayed, when it should not, as the view has just been mounted.
Challenge link: https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering
Aditya
@ezioda004
Sep 29 2018 09:43
You're rendering buttonOne all the time, whereas it should be rendered initially only, after that based on input it should change to buttonTwo and buttonThree
Hint: Nested ternaries
Morchid Chellali
@Morched23MJ
Sep 29 2018 09:49

@ezioda004, I replaced it with this:

{
          (buttonOne && this.state.userAge == '') || (this.state.userAge < 18 ? buttonThree : buttonTwo)
        }

Still not working. || operator is not valid in JSX?

{
          this.state.userAge == '' ? buttonOne : this.state.userAge < 18 ? buttonThree : buttonTwo
        }
Thanks @ezioda004!
Morchid Chellali
@Morched23MJ
Sep 29 2018 14:06
Just completed React challenges.
It was a lot of mental energy consumption. :D
AJ Brommy
@AJ-Brommy
Sep 29 2018 15:19
Congrats :)
Stephen James
@sjames1958gm
Sep 29 2018 21:07
@Morched23MJ :+1:
jsjoe82
@jsjoe82
Sep 29 2018 21:08
Hey, folks. I've got this: https://codepen.io/jsjoe82/pen/PywEqr/ It's my codepen for the survey form. In it, I have my radio buttons setup and their labels. I got the radio buttons to go to the left of the labels, but now the buttons are above the words on the left side of the page where everything else so far is good.
<div class="input-holder">
          <div class="left-side">
            <label for="satisfaction" id = "cantgetno">Given your experiences so far, would you reccomend Free Code Camp to a friend? :
          </div>
          <div class="right-side">
            <ul style="list-style: none;">
          <li class="radio"><label>There was an option not to?<input name="radio-buttons" value="DUH"  type="radio" class="userRatings" ></label></li>
            <li class="radio"><label>It couldn't hurt<input name="radio-buttons" value="Sure"  type="radio" class="userRatings" ></label></li>
            <li class="radio"><label>Ehhhhh<input name="radio-buttons" value="Onthefence"  type="radio" class="userRatings" ></label></li>
            </ul>
          </div>
        </div>
Unsure of how to make the words under .left-side be at the top of the radio buttons instead of being at the bottom of them on the left side.