Next.js Discord

Discord Forum

iterating through objects in jsx

Answered
Whimbrel posted this in #help-forum
Open in Discord
WhimbrelOP
This code is giving errors
Can someone please explain why?
Is it because map returns an array?
Are there any other ways to iterate in jsx?
const fs = require('fs');                                             function parsequote(){             const content =  fs.readFileSync('./quotes.txt').toString().split('~');
const links = content.filter(item => item.includes('_!_')).map(l => l.replace('_!_', '').trim());
const quotes = content.filter(item => !item.includes('_!_') && Boolean(item));                           
//const obj = {};
//quotes.forEach((keys, i) => obj[keys] = link[i]);

return [quotes,links];
}

export function Quotespage(){
const [quotes, links] = parsequotes();
return (
<>
{quotes.map((item, i) => <p>{item}</p><a href={links[i]}>link</a>)}
</>
)
Answered by joulev
{quotes.map((item, i) => (
        <Fragment key={i}>
          <p>{item}</p>
          <a href={links[i]}>link</a>
        </Fragment>
))}

two )'s in the final line there
View full answer

28 Replies

WhimbrelOP
const fs = require('fs');                                             

function parsequote(){

const content =  fs.readFileSync('./quotes.txt').toString().split('~');

const links = content.filter(item => item.includes('_!_')).map(l => l.replace('_!_', '').trim());

const quotes = content.filter(item => !item.includes('_!_') && Boolean(item));

return [quotes,links];
}

export function Quotespage(){
const [quotes, links] = 
parsequotes();

return (
<>
{ quotes.map((item, i) => <p>{ item } </p><a href={links[i]} >link</a>) }
</>
)
Like this?
joulev
hmm. so what errors did you get?
Tomistoma
Your function is called parsequote, but in the main function, you are calling parsequoteS
@joulev hmm. so what errors did you get?
WhimbrelOP
./app/components/quotescomp/quotespage.js
NonErrorEmittedError: (Emitted value instead of an instance of Error)
x Expected ',', got 'href'
Failed to compile
On line 15:1
joulev
yeah most likely the error is due to that typo Zdravko mentioned
WhimbrelOP
I fixed it
And still getting the error
app/components/quotescomp/quotespage.js:15:1]
15 | const [quotes, links] = parsequote();
16 | return (
17 | #Unknown Channel
18 | {quotes.map((item, i) => <p>{item}</p><a href={links[i]}>link</a>)}
: ^^^^
19 | </>
20 | )
21 | }
`----
joulev
but without that typo, you should be using a fragment since you are not returning one single jsx element
.map((item, i) => <Fragment key={i}><p>{item}</p><a>link</a></Fragment>)
WhimbrelOP
O
I wrapped it inside a div like this
{quotes.map((item, i) => <div><p >{item}</p><a href={links[i]}>link</a></div>)}
Now I am getting
Unhandled Runtime Error
Error: Unsupported Server Component type: undefined
joulev
import fs from "fs";
import { Fragment } from "react";

function parsequote() {
  const content = fs
    .readFileSync('./quotes.txt')
    .toString()
    .split('~');
  const links = content
    .filter(item => item.includes('_!_'))
    .map(l => l.replace('_!_', '').trim());
  const quotes = content
    .filter(item => (
      !item.includes('_!_') && Boolean(item)
    ));
  return [quotes, links];
}

export function Quotespage() {
  const [quotes, links] = parsequote();
  return (
    <>
      {quotes.map((item, i) => (
        <Fragment key={i}>
          <p>{item}</p>
          <a href={links[i]}>link</a>
        </Fragment>
      )}
    </>
  );
}

does this work?
if it doesnt work the problem should be outside this part
WhimbrelOP
O still got the error
But this time I got it on the root path
But the error still points to this function
joulev
then you need to make a reproduction repository
WhimbrelOP
NonErrorEmittedError: (Emitted value instead of an instance of Error)
x Expected ',', got '}'
,-[/data/data/com.termux/files/home/forjs/radix/forrad/app/components/quotescomp/newquotes.js:24:1]
24 | <Fragment key={i}>
25 | <p>{item}</p>
26 | <a href={links[i]}>link</a></Fragment>
27 | )}
: ^
28 | </>
29 | );
30 | }
what happens when you type code in discord without checking
add another ) to that )}
joulev
{quotes.map((item, i) => (
        <Fragment key={i}>
          <p>{item}</p>
          <a href={links[i]}>link</a>
        </Fragment>
))}

two )'s in the final line there
Answer
WhimbrelOP
Hey thanks it worked!
:blob_aww: