These are chat archives for FreeCodeCamp/HelpFrontEnd

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

const inputStyle = {
  width: 235,
  margin: 5

class CheckUserAge extends React.Component {
  constructor(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) {
      userAge: ''
  submit() {
      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 (
        <h3>Enter Your Age to Continue</h3>
          onChange={this.handleChange} /><br />
          this.state.userAge != '' && this.state.userAge < 18 ? buttonThree : buttonTwo
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:
Sep 29 2018 09:43 UTC
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
Sep 29 2018 09:49 UTC

@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
Sep 29 2018 14:06 UTC
Just completed React challenges.
It was a lot of mental energy consumption. :D
AJ Brommy
Sep 29 2018 15:19 UTC
Congrats :)
Stephen James
Sep 29 2018 21:07 UTC
@Morched23MJ :+1:
Sep 29 2018 21:08 UTC
Hey, folks. I've got this: 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 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>
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.