Workaround Explorer

Get Help React.js
#1

Hello,

I’m getting stuck on this project on step two… when i import from salaryData.js and save the built in browser refreshes and the columns that have titles of Select Roles and Select a Company disappear and leave only the Details section. I might be being stupid and have a simple thing wrong but I cant follow any further steps because of this and cant work out why it is happening.

can anyone explain why this might be happening and how I can work out for myself why this is the case?.. I have included what I have changed below (see last two lines of salaryData.js and first line of main.js.

salaryData.js …

const salaryData = [

{ role: ‘CTO’, company: ‘Big Data Inc.’, salary: 320000},

{ role: ‘Technical Lead’, company: ‘Big Data Inc.’, salary: 230000},

{ role: ‘Software Engineer II’, company: ‘Big Data Inc.’, salary: 180000},

{ role: ‘Software Engineer I’, company: ‘Big Data Inc.’, salary: 140000},

{ role: ‘CTO’, company: ‘Medium Data Inc.’, salary: 215000},

{ role: ‘Technical Lead’, company: ‘Medium Data Inc.’, salary: 165000},

{ role: ‘Software Engineer II’, company: ‘Medium Data Inc.’, salary: 140000},

{ role: ‘Software Engineer I’, company: ‘Medium Data Inc.’, salary: 115000},

{ role: ‘CTO’, company: ‘Small Data Inc.’, salary: 175000},

{ role: ‘Technical Lead’, company: ‘Small Data Inc.’, salary: 135000},

{ role: ‘Software Engineer II’, company: ‘Small Data Inc.’, salary: 115000},

{ role: ‘Software Engineer I’, company: ‘Small Data Inc.’, salary: 95000},

];

const getRoles = () => {

return [‘CTO’, ‘Technical Lead’, ‘Software Engineer II’, ‘Software Engineer I’];

}

const getCompanies = () => {

return [‘Big Data Inc.’, ‘Medium Data Inc.’, ‘Small Data Inc.’];

}

const getDataByRole = role => {

return salaryData.filter(obj => obj.role === role);

}

const getDataByCompany = company => {

return salaryData.filter(obj => obj.company === company);

}

export {getRoles, getCompanies, getDataByRole, getDataByCompany};

export default salaryData;

main.js…

import {getRoles, getCompanies} from ‘./module/salaryData.js’;

// TODO: Get the companies and roles using the salaryData module.

const companies = ;

const roles = ;

// Create input buttons for every company and role represented in the data.

renderInputButtons(companies, ‘company’);

renderInputButtons(roles, ‘role’);

// This function will create a new with radio

// inputs based on the data provided in the labels array.

function renderInputButtons(labels, groupName) {

const container = document.createElement(‘section’);

container.setAttribute(‘id’, ${groupName}Inputs);

let header = document.createElement(‘h3’);

header.innerText = Select a ${groupName};

container.appendChild(header);

labels.forEach(label => { // For each label…

// Create the radio input element.

let divElement = document.createElement('div');

divElement.setAttribute('class', 'option');

let inputElement = document.createElement('input');

inputElement.setAttribute('type', 'radio');

inputElement.setAttribute('name', groupName);

inputElement.setAttribute('value', label);

divElement.appendChild(inputElement);

// Create a label for that radio input element.

let labelElement = document.createElement('label');

labelElement.setAttribute('for', label);

labelElement.innerText = label;

divElement.appendChild(labelElement);

// Update the results when the input is selected.

inputElement.addEventListener('click', updateResults);

container.appendChild(divElement);

});

document.querySelector(‘main’).prepend(container);

}

function updateResults(){

// Get the current selected company and role from the radio button inputs.

const company = document.querySelector(“input[name=‘company’]:checked”).value;

const role = document.querySelector(“input[name=‘role’]:checked”).value;

// If either the company or role is unselected, return.

if (!company || !role) { return; }

// TODO: Use the workAroundModule functions to calculate the needed data.

const averageSalaryByRole = 0;

const averageSalaryByCompany = 0;

const salary = 0;

const industryAverageSalary = 0;

// Render them to the screen.

document.getElementById(‘salarySelected’).innerText = The salary for ${role}s at ${company} is \$${salary};

document.getElementById(‘salaryAverageByRole’).innerText = The industry average salary for ${role} positions is \$${averageSalaryByRole};

document.getElementById(‘salaryAverageByCompany’).innerText = The average salary at ${company} is \$${averageSalaryByCompany};

document.getElementById(‘salaryAverageIndustry’).innerText = The average salary in the Tech industry is \$${industryAverageSalary};

}

#2

So does the code work as is? But when you add the import statement for salaryData it stops rendering part of the page?

Can you show how you write the import statement for salaryData?

#3

Yes as is it renders however adding

import {getRoles, getCompanies} from ‘./module/salaryData.js’;

to main.js causes it to stop rendering fully

#4

Gotcha. Check out #4 in the instruction if you haven’t already. The browser gets confused when you import modules without telling it you are going to.

#5

I’ve done this however the same issue is still ongoing - for reference this is how index.html looks after step 4

<meta charset="utf-8">

<title>WorkAround</title>

<link rel="stylesheet" type="text/css" href="index.css" />

<script type="module" src="main.js" defer></script>

<main>

  <!-- The roles and companies <section>s are dynamically created in main.js with renderInputButtons() -->

  <section id="resultsContainer">

    <h3>Details:</h3>

    <p id="salarySelected"> ... </p>

    <p id="salaryAverageByRole"> ... </p>

    <p id="salaryAverageByCompany"> ... </p>

    <p id="salaryAverageIndustry"> ... </p>

  </section>

</main>