# Learn Functional Programming by Building a Spreadsheet - Step 35

### Tell us what’s happening:

I am trying to return the value property of the return value of the .find() method.

### Your code so far

``````<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css" />
<body>
<div id="container">
<div></div>
</div>
<script src="./script.js"></script>
</body>
</html>
``````
``````/* file: styles.css */
#container {
display: grid;
grid-template-columns: 50px repeat(10, 200px);
grid-template-rows: repeat(11, 30px);
}

.label {
background-color: lightgray;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
``````
``````/* file: script.js */
const isEven = num => num % 2 === 0;
const sum = nums => nums.reduce((acc, el) => acc + el, 0);
const average = nums => sum(nums) / nums.length;

const median = nums => {
const sorted = nums.slice().sort((a, b) => a - b);
const length = sorted.length;
const middle = length / 2 - 1;
return isEven(length)
? average([sorted[middle], sorted[middle + 1]])
: sorted[Math.ceil(middle)];
}

const spreadsheetFunctions = {
sum,
average,
median
}

const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);
const charRange = (start, end) => range(start.charCodeAt(0), end.charCodeAt(0)).map(code => String.fromCharCode(code));

// User Editable Region

const evalFormula = (x, cells) => {
const idToText = id => cells.find(cell => element.value.find());
}

// User Editable Region

window.onload = () => {
const container = document.getElementById("container");
const createLabel = (name) => {
const label = document.createElement("div");
label.className = "label";
label.textContent = name;
container.appendChild(label);
}
const letters = charRange("A", "J");
letters.forEach(createLabel);
range(1, 99).forEach(number => {
createLabel(number);
letters.forEach(letter => {
const input = document.createElement("input");
input.type = "text";
input.id = letter + number;
input.ariaLabel = letter + number;
input.onchange = update;
container.appendChild(input);
})
})
}

const update = event => {
const element = event.target;
const value = element.value.replace(/\s/g, "");
if (!value.includes(element.id) && value.startsWith('=')) {

}
}
``````

### Your browser information:

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0`

### Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 35

Hi there. The seeded code provides you with an `input` element and assigns it to the `idToText` variable. That is to say the `cells.find` method returns an input element. We don’t want the input element itself. We’re only after the `value` property contained in the `input ` element returned by `cells.find` method.

I’d reset the challenge to bring back the seeded code. From there I would focus on getting the `value` from the element returned by `cells.find`. If you have any further questions please let me know.

Happy coding.

i tried to use value.find() but it is still not working, can you be a bit more explicit for me?

You don’t use `value.find`. That code wouldn’t work for two reasons. A number doesn’t have a `find` method. Number two even if it did, you would not be able to retrieve the element as you are comparing an ID to a value.

The actual answer is actually a lot simpler than that. I would recommend resetting back to the seed code. From there, I would retrieve the `value` on the object returned by the `find` method.

i am still stuck in this stage, can you kindly provide more insight as to how i can go about it

solution redacted

It should be like this. You should find cell first with matching to cell’s id inside to cells array with callback function. But function return cell element itself, you need the value of that input element. You can access to value like this, using value property.

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like

I actually do not understand his solution, you mind to be more explicit, please?

I would suggest rereading the suggestion @a2937 left for you here

specifically this part here

I would also suggest adding console statements so you better understand what `idToText` is

Try this code and open up the console

``````const evalFormula = (x, cells) => {
const idToText = id => cells.find(cell => cell.id === id);
console.log("this is idToText variable:",idToText("A1"))
}

const cells = [
{ id: "A1", value: 10 },
{ id: "B1", value: 20 },
{ id: "C1", value: "=sum(A1,B1)" }
];

console.log(evalFormula("C1", cells));
``````

You should see the following in the console

``````this is idToText variable: { id: 'A1', value: 10 }
undefined
``````

pay close attention to the first print statement here

``````this is idToText variable: { id: 'A1', value: 10 }
``````

you see that `idToText` is an object.

The step wants you to access the value property from that object.

How do you access properties from an object?

Once you see the object, then it will make more sense what the answer is.

Hope that helps

``````  const idToText = id => {
const cell = cells.find(cell => cell.id === id);
return cell.value
};
return idToText(A1);
};```                                             like this?``````

i still am unable to get past the stage

Your `idToText` function approach seems correct, you find to cell with id match and return to value of that but it may not be suitable for this lesson. If you recall the initial code of that stage, you’ll notice that the `idToText` function was nested inside the `evalFormula` function, and the lesson does not intend for this function to return anything that is this part of code is unneccessary.

The lesson aims to demonstrate how to write code that is clear and concise, with each line ideally returning a single value without the need for extra variable declarations or brackets. Therefore, if you adjust your `idToText` function to meet these requirements, you should be able to pass :).

thank you for your time, but still cant seem to get past this stage

I am struggling with finding the value property of the return value of the .find() method

You’re welcome. Sometimes coding can be very difficult, not just because of the code itself, but also because things may not always turn out as we expect or small differences can lead to significant results. That’s why developers always use version control systems. You can think of these lesson stages as your version control system, where your changes are not immediately applied to the client’s story request, even if the output wouldn’t change, you can revert your last change, reset the changes, and try again. You can do it🙂.

`cells` is an array of elements. If we jump to the end step, we can look at the `evalFormula` call site (usage). The second argument is the array of elements (`cells` parameter inside `evalFormula`).

``````evalFormula(value.slice(1), Array.from(document.getElementById("container").children)
``````

So we call `find` on the array of elements (`cells`) and using the `id` parameter value passed to `idToText` when it is called we find the element. So the code from the previous step is.

`const idToText = id => cells.find(cell => cell.id === id)`

Now, instead of just returning the element which is what we do in the above code, we want that elements `value` property. We can dot onto the element `find` returns directly.

Example code with text elements and the `innerText` property (instead of `input` elements and the `value` property)

``````<p id="1">Text 1</p>
<p id="2">Text 2</p>
<p id="3">Text 3</p>
<p id="4">Text 4</p>
``````
``````const paragraphs = document.querySelectorAll("p");

function getValueById(id, elements) {
return elements.find((element) => id === element.id).innerText;
}

console.log(getValueById("2", Array.from(paragraphs))); // Text 2
console.log(getValueById("4", Array.from(paragraphs))); // Text 4
``````
1 Like

like this

``````const evalFormula = (x, cells) => {
const idToText = id => cells.find(cell => cell.id === id); return element ? element.value : null;
}
``````

No, this returns the element.

`elements.find((element) => id === element.id)`

You can get the `.value` property on the element returned directly by just dotting on to it at the end.

``````array.find((param) => param === someCondition).someProperty
``````

The code I posted using `innerText` is the same, you just use `.value` instead of `.innerText`

blown away at how simple the code was, thank you for assisting and for your patience.