Display not visible in JavaScript calculator

JavaScript
1

Tell us what’s happening:

I’m building my JavaScript calculator locally in React and unfortunately, I’m unable to get my display to show up. I’m not sure if the problem is with my CSS or with another portion of my code.

Also, I have several components that appear to be defined but unused within App.js and I’m not sure why this is given that I’ve imported them into the App.js file. At this point, I’m a little confused as to what is going wrong and a push in the right direction would be very beneficial.

Any help is appreciated, thanks.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36.

Challenge: Build a JavaScript Calculator

Link to the challenge:

2

Hey,

  1. It’s <div className="calc-wrapper" id="display"></div> in the component and .display in CSS
  2. you import the components and don’t render them anywhere in App.js like
render(){
	return(
	<>
	  <Button/>
	  <AnotherButton/>
	</>
	);
}
4

Imo the problem is that you have not decided on your app structure/plan, namely whether you’re going to use components, separate css files and other React Feng Shui or put it in a single component. Eg as I recall you got Button.js, and the whole(?) keyset manually written.It can be confusing, and you can actually do it (mix) anyways.

If you’re new to react and want to finish the project asap, html-like approach (single component/two components) would be easier, and it won’t be DRY at all.

If you want to practice React things, go with components or mix things up, look out for duplicate parts. React docs encourage empirical way :slight_smile:

1 Like
5

I have implemented my components and incorporated my CSS in a better fashion. However, I only have limited functionality with my calculator and my calculator is now passing fewer tests. This seems to be in part because I need to pass id through my Button component, for example, I’m currently passing id in the following manner:

<div className='row'>
          <Button id = 'one' handleClick={this.addToInput}>1</Button>
          <Button id = 'two' handleClick={this.addToInput}>2</Button>
          <Button id = 'three' handleClick={this.addToInput}>3</Button>
          <Button id ='add' data-action='add' handleClick={this.add}>+</Button>
          </div>

But the Button component itself does not pass an id:

render() {
    return(
      <button
        className={`button ${this.isOperator(this.props.children) ? "" : "operator"}`}
        onClick={() => this.props.handleClick(this.props.children)}
      >
        {this.props.children}
      </button>
    )
  }
}

What is the best method for me to pass id through my Button component?

Thank you for your help, :pray:.

6

Please create a repo with the code as you have it locally (including the correct file structure).

Also, you have committed the node_modules folder. You need to add a .gitignore file and exclude the folder.

You have this.state.output in the display but there is no such property on the state object. The display is off to the left side because the container is set to be a flexbox container.

7

Here is my updated repo:

8

I have a hard time believing that is your local file structure. Where are the src and public folders, where is the components folder? If I just clone and run your project as it is in the repo now I will get errors.

9

You are correct, my local file structure is organized differently. I’ve reorganized this repository to better reflect my local file structure.

10

You can store each button info in a file (id, value or anything) and pass via props to <Button/> in .map()

<Button id ="seven" handleClick={this.addToInput}>7</Button>

here you pass id="seven" to component props, and do not use it in Button.js, the same with #display

renaming src folder is a bad idea, webpack won’t like it, case matters

1 Like
11

I’m not sure I understand your workflow here. Are you pushing a copy of the project to GitHub?

You are supposed to push the actual code you are working on, not a copy. The remote repository should match your local repository.

Add a .gitignore file and put node_modules in the file and save it before step 5.

More docs

12

Can you give me an idea of what passing id via props by mapping through my Button component might look like? Do I need to create a separate ID file and then create the id property within my button component? Also, you have <Button/>in.map() did you mean <Button/>id.map()?

Thanks, for your help.

13

You can also pass values to the handler.

<Button id='seven' onClick={() => this.addToInput(7)}>7</Button>

Not really sure why you want to pass anything down to the Button component, I would expect that to be stateless and not necessarily need props either.

It might be an array of objects. You would map the array and inside each object would be an id, etc. Then the map callback function will have access to all the properties of the object and can put them on properties on the component.

const users = [
  {
    id: 1,
    name: "John",
    age: 32
  },
  {
    id: 2,
    name: "Jill",
    age: 54
  },
  {
    id: 3,
    name: "Kate",
    age: 23
  }
];

export default function App() {
  return (
    <div className="App">
      {
        users && users.map(({id, name, age}) => (
          <User key={id} userId={id} userName={name} useAge={age} />
        ))
      }
    </div>
  );
}

function User({userId, userName, useAge}) {
  return (
    <div>
    Name: <span>{userName} (id {userId}): </span>
    Age: <span>{useAge}</span>
    </div>
  )
}

I would still really appreciate it if you created a repo with your current code as it is locally. Any time you update your code push the changes so we can see the current code and run it locally.

14

Check react docs lists and keys there’s a good example of basic list rendering, you can render your buttons the same way

function NumberList(props) {
  const numbers = props.numbers; //2 here's the array  of numbers from props
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />, //1 here you pass array of  numbers as numbers  prop to NumberList component
  document.getElementById('root')
);

not exactly what I meant, probably a better way :vulcan_salute:

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.