The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »

Tei: Feb 19, 2011; Can't post for 5 days!

Something quick and dirty can help sometimes.

I use to have a "webbrowser code editor" similar to codeanywhere that I did for myself in XUL, that things was not very safe, but was cool to write code from anywhere with two pages open, one for the editor, the other for the page I was editing.

# ? Apr 9, 2019 21:52

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 05:08

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

My god Ninja Forms is still as much if not more of a mess than I remember it being. The output is nested div city, and it does this:

code:


<nf-fields-wrap>

     <nf-field>
     (a maze of divs and labels and inputs goes here)
     </nf-field>

     <nf-field>
     (a maze of divs and labels and inputs goes here)
     </nf-field>

     <nf-field>
     (a maze of divs and labels and inputs goes here)
     </nf-field>

</nf-fields-wrap>

I want to use CSS grid with it, so I put display: grid and corresponding CSS on nf-fields-wrap which is great, but since it's actually impossible to give the individual non-standard HTML tags nf-field their own class or whatever, I can't target them specifically for things like spanning one across two grid columns. I can always do nf-field:nth-of-type(4), but that requires me to know which fields are which number and to change them if I add/remove/change the order of fields. I don't know why they need those non-standard HTML tags. They're generated by JavaScript (Marionette?) so I can't even put something in functions.php to get rid of them.

# ? Apr 9, 2019 23:02

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

Trying to do anything with Wordpress that Wordpress does not want to do? It does not spark joy, I'll tell you that.

Even when I think I have a case for using/recommending Wordpress these days, there's always one or two special requests that I realize would take me hours to figure out in Wordpress, when I could just bite the bullet up front and use Django/Wagtail.

# ? Apr 10, 2019 14:59

go play outside Skyler: Nov 7, 2005

I just use Contact Form 7, it's a no-thrills plug-in where you can basically customise the html yourself. It doesn't have any of the fancy wysiwig form editors so it's the perfect tool when you're being paid to create forms. How often do you update forms anyways?

It doesn't save form data by default but I believe there's a plug-in for that.

I've never looked back at Ninja ever since.

# ? Apr 10, 2019 15:57

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

go play outside Skyler posted:

I just use Contact Form 7, it's a no-thrills plug-in where you can basically customise the html yourself. It doesn't have any of the fancy wysiwig form editors so it's the perfect tool when you're being paid to create forms. How often do you update forms anyways?

It doesn't save form data by default but I believe there's a plug-in for that.

I've never looked back at Ninja ever since.

Is Contact Form 7 good now? Last I used it, they restricted it to only use reCAPTCHA v3, IIRC, and there was some bug with that and forms just weren't sending mail at all. A lot of recent plugin reviews give it one star because of whatever bug that was. I did like the lack of WYSIWYG in that plugin though.

On the bright side, I have made some strides in understanding React thanks to Scrimba! The tutorial kind of lost me around halfway through with mapping components, so I'm going to stop there and go back to it. It's a bit disappointing that even though I understand what React is and why I'd use it, all I can do with it for the time being is write some functions that render a static webpage I could have written in a few lines of HTML anyway. But I see the potential now.

I haven't wrapped my head around arrow functions => (it's just the syntax, I'm used to writing "function() {}" for everything) or when I'd use a function vs. when I'd write a class that extends React.Component. Props are fun but I need more work on exactly how to call them, and I'm looking forward to changing states and fetching data from APIs.

# ? Apr 11, 2019 01:04

prom candy: Dec 16, 2005; Only I may dance

In the past, you would write a class that extends React.Component any time you wanted to use local state in your component, or any time you want to use life cycle methods (e.g. fire off a function when your component first renders, or when it re-renders with new props.) As of React 16.8 (announced in October, released in Feb) you can use Hooks to accomplish many of these same things, but class components aren't going away.

# ? Apr 11, 2019 04:13

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

prom candy posted:

In the past, you would write a class that extends React.Component any time you wanted to use local state in your component, or any time you want to use life cycle methods (e.g. fire off a function when your component first renders, or when it re-renders with new props.) As of React 16.8 (announced in October, released in Feb) you can use Hooks to accomplish many of these same things, but class components aren't going away.

Old React: "drat, I need to add some state to this component, now I have to convert it into a class" :argh:

New React: import { useState } from 'react'; :toot:

# ? Apr 11, 2019 04:25

go play outside Skyler: Nov 7, 2005

LifeLynx posted:

Is Contact Form 7 good now? Last I used it, they restricted it to only use reCAPTCHA v3, IIRC, and there was some bug with that and forms just weren't sending mail at all. A lot of recent plugin reviews give it one star because of whatever bug that was. I did like the lack of WYSIWYG in that plugin though.

There's a plug-in that brings recaptcha 2 that works well (and has very little code). I believe the bug you're mentioning is related to recaptcha as well

# ? Apr 11, 2019 09:07

fuf: Sep 12, 2004; haha

I'm doing a dev challenge test thing and the task is "increase the size of the font throughout the entire page to 125% of its current size when viewing the page in a window smaller than 500px wide."

Is this enough or am I missing something?

code:

@media(max-width: 500px){
  body{
    font-size:125%;
  }
 }

It works but seems too easy.

All the font sizes in the css use em like:

code:

p{
font-size: 1.5em;
}

There's no default base font size set on body (maybe I should set one?)

# ? Apr 11, 2019 13:02

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I can't think of a reason why that isn't the solution. I think the point of the challenge is a lot of people have trouble with css and want to see if you know what a media query is. Loads of people now just do this kind of thing with a weird js component abstraction or something like that.

# ? Apr 11, 2019 13:27

fuf: Sep 12, 2004; haha

Cool, thanks. That's reassuring. It's just weird because it came after a list of other challenges that were way harder.

# ? Apr 11, 2019 13:36

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

Old React: "drat, I need to add some state to this component, now I have to convert it into a class"

New React: import { useState } from 'react';

Honestly, without hooks, you shouldn't ever need to write a functional component. Under the hood, they're treated as classes. And if you run benchmarking tests, you'll find functional components are actually SLOWER to render than Components.

IMO, always use React.PureComponent if you're writing a class, otherwise use a regular old React.Component

source: https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc

# ? Apr 11, 2019 14:29

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

Honestly, without hooks, you shouldn't ever need to write a functional component. Under the hood, they're treated as classes. And if you run benchmarking tests, you'll find functional components are actually SLOWER to render than Components.

IMO, always use React.PureComponent if you're writing a class, otherwise use a regular old React.Component

source: https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc

That article is 3 years old.

# ? Apr 11, 2019 15:11

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

yeah but he's done React 16 benchmarking tests if you look at the Github repo, and the point still stands

https://github.com/grgur/stateless-vs-pure/tree/master/app-react16

# ? Apr 11, 2019 15:56

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

yeah but he's done React 16 benchmarking tests if you look at the Github repo, and the point still stands

https://github.com/grgur/stateless-vs-pure/tree/master/app-react16

Those tests seem insanely contrived to get the results he wants. I mean, I guess calling a long running function inside a functional component that does nothing is something he might do for some reason.... but those tests are as far from real-world as it gets.

# ? Apr 11, 2019 16:12

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

That's fair. I mean, you can always memoize your function components and that really improves performance.

But I just think you don't get much gain by using them often. Refactoring function components to classes is such a loving pain once you start needing state, and if React doesn't treat the two any differently, why bother?

# ? Apr 11, 2019 16:23

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Prior to hooks, I think you should start out with functional components for these reasons:

1. It makes it absolutely clear that this is a stateless component when you're reading code.
2. It nudges you towards good design decisions where most of your components are stateless.
3. They're just plain easier to read.
4. I find them pretty easy to refactor into a class component if it becomes necessary, but I view the not-instantaneous nature of the refactor to be a feature rather than a bug because of 1 and 2.

I think 1 and 2 are pretty important.

Thermopyle fucked around with this message at 17:08 on Apr 11, 2019

# ? Apr 11, 2019 17:05

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

That's fair. I mean, you can always memoize your function components and that really improves performance.

But I just think you don't get much gain by using them often. Refactoring function components to classes is such a loving pain once you start needing state, and if React doesn't treat the two any differently, why bother?

Because now you don't need to convert them! And if you use them, and then *testing* shows you are doing a lot of rendering you shouldn't, you can memo() them without converting. Plus that those things Thermo said.

# ? Apr 11, 2019 17:34

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

go play outside Skyler posted:

There's a plug-in that brings recaptcha 2 that works well (and has very little code). I believe the bug you're mentioning is related to recaptcha as well

Oh yeah now I remember. When reCAPTCHA v3 was new, CF7 decided it was new and shiny and made it the only option, which smacked of "We know best!" even though many people preferred v2's "I'm not a robot" checkbox (who cares if it might negatively affect lead generation, clients just feel more comfortable seeing the visual representation of the anti-spam measure). reCAPTCHA v3 also had to learn what was and wasn't spam, so at first it seemed like it hardly caught a fraction of what v2 would have, especially on small sites that didn't get a lot of traffic (bots or otherwise). When I try to use v3, I get a lot of "We're getting tons of spam! Can you add the checkbox?"

# ? Apr 11, 2019 17:46

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

yeah my argument is definitely less valid with the introduction of Hooks, like I mentioned previously. And honestly there's not much sense in arguing it.

I still think readability is subjective though. I think reading Class components give you a really good sense of what is happening and it what order. The lifecycle methods have very descriptive names. Things like useEffect looks like drat magic if you don't have a solid understanding of how React works. I think Lifecycle methods could be read and understood without having to explicitly explain to someone more junior what is going on.

^^ This is a whole different argument though.

# ? Apr 11, 2019 18:03

prom candy: Dec 16, 2005; Only I may dance

Lifecycle methods are cool until you have a component that has to deal with multiple different things during the same lifecycle method, at which point they become really cluttered.

# ? Apr 11, 2019 18:21

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Once I figure out how to map over data from a JSON file, a whole new world will open up to me, I feel. I'm so close, too!

code:

import React, { Component } from 'react';
// [url]https://api.scryfall.com/catalog/card-names[/url]

class App extends Component {

  constructor() {
    super()
    this.state = {
      cardname: {}
    }
  }

  componentDidMount() {
    fetch("https://api.scryfall.com/catalog/card-names")
      .then(response => response.json())
      .then(data => {
        this.setState({
          cardname: data
        })
     })
  }

  render() {
      //return(<span>{this.state.cardname.data}</span>)
      return(
        <ul>
          {this.state.data.map(function(object, index){
            <li>{object}</li>
          })}
        </ul>
      )
  }
}

export default App;

What goes in that LI tag to make this spit out a list of card names from the data field of that JSON output?

# ? Apr 12, 2019 22:46

my bony fealty: Oct 1, 2008

the word return in front of the opening li tag. or use an arrow function with () instead of {} for implicit return. also give the li a key prop so React wont yell at you. the index is usually fine in small stuff but for bigger you'll want to do key={object.name} or whatever that's guaranteed to be unique throughout the application.

# ? Apr 12, 2019 22:59

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

my bony fealty posted:

the word return in front of the opening li tag. or use an arrow function with () instead of {} for implicit return. also give the li a key prop so React wont yell at you. the index is usually fine in small stuff but for bigger you'll want to do key={object.name} or whatever that's guaranteed to be unique throughout the application.

TypeError: Cannot read property 'map' of undefined. Seems like I might have a problem with "this.state.data.map" also?

# ? Apr 12, 2019 23:27

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

TypeError: Cannot read property 'map' of undefined. Seems like I might have a problem with "this.state.data.map" also?

There�s a lot wrong here. First, your initial stare is set to an empty object, but it looks like you want an empty array. Second, you set �state.cardname� to handle the fetched data, but then you try to loop over �state.data� which doesn�t exist. And then unless your json is actually an array of strings, your LI will probably need some property name reference

Lumpy fucked around with this message at 23:55 on Apr 12, 2019

# ? Apr 12, 2019 23:49

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Don't clutter up your import with React and { Component }, just write out React.Component for your class.

I looked at the API results. You should initialize state.cardname to an empty array, not an empty object (cardname: []). I'd also rename it to cardNames to make it a little more clear it's an array.

On the results of the API call, do your setState operation but set cardNames to the data property of the resulting object. I'd just rename the arrow input to x and set it to x.data.

Lastly, as others mentioned, just use an arrow function for the implicit return and make sure to set a key on any iterated loop. Make sure you're accessing the right property of your state (data doesn't exist, you called this cardname or cardNames if you listened to me above). You also don't care about the index of the loop so don't take that input from the map.

Here's a codesandbox demonstrating: https://codesandbox.io/s/x391w2o69w

Same example using hooks: https://codesandbox.io/s/k3nmmk2zqo

Ruggan fucked around with this message at 04:31 on Apr 14, 2019

# ? Apr 14, 2019 04:01

ConanThe3rd: Mar 27, 2009

I'm having trouble with my react app too. I'm trying to get an API based on geo location and to do that I have it call like the example bellow (having done so in a .js app that I'm adapting this from) however when I run the app it states that Let and Long arn't defined and I'm assuming it's a timing issue (IE: everything fireing off before I can get the geolocation) so I'm kinda flummoxed as to how to get it going.

code:

  componentDidMount() {
    // Initialize Longitude and Latitude lets
    let long 
    let lat

    // Set APIs
    // Stored Localy for the moment before I .env them   
    const apiKey1 = "???"
    const apiKey2 = "???"

    // get getoloaction and set API
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        long = position.coords.longitude;
        lat = position.coords.latitude;
      });

      // SetAPI
      const proxy = "https://cors-anywhere.herokuapp.com/";
      const apiDS = `${proxy}[url]https://api.darksky.net/forecast/[/url]${apiKeyDS}/${lat},${long}`;
      const apiGM = `${proxy}[url]https://maps.google.com/maps/api/geocode/json?latlng=[/url]${lat},${long}&sensor=false&key=${apiKeyGM}`;
     
     // Rest of code
}

# ? Apr 14, 2019 11:41

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

ConanThe3rd posted:

code:




navigator.geolocation.getCurrentPosition(position => {
  long = position.coords.longitude;
  lat = position.coords.latitude;
});

This is an asynchronous call, the lines of code after this where you build the API URLs won't work the way you think they will (lat and long are going to be undefined), you need those lines inside the callback.

Edit: if you want to write the code in the sequential way you currently have it, use `async componentDidMount`, then await on getting the `coords` (you'll need to wrap the location function so you have a promise-returning version)

RobertKerans fucked around with this message at 13:26 on Apr 14, 2019

# ? Apr 14, 2019 12:20

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

ConanThe3rd posted:

I'm having trouble with my react app too. I'm trying to get an API based on geo location and to do that I have it call like the example bellow (having done so in a .js app that I'm adapting this from) however when I run the app it states that Let and Long arn't defined and I'm assuming it's a timing issue (IE: everything fireing off before I can get the geolocation) so I'm kinda flummoxed as to how to get it going.
code:
  componentDidMount() {
    // Initialize Longitude and Latitude lets
    let long 
    let lat

    // Set APIs
    // Stored Localy for the moment before I .env them   
    const apiKey1 = "???"
    const apiKey2 = "???"

    // get getoloaction and set API
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        long = position.coords.longitude;
        lat = position.coords.latitude;
      });

      // SetAPI
      const proxy = "https://cors-anywhere.herokuapp.com/";
      const apiDS = `${proxy}[url]https://api.darksky.net/forecast/[/url]${apiKeyDS}/${lat},${long}`;
      const apiGM = `${proxy}[url]https://maps.google.com/maps/api/geocode/json?latlng=[/url]${lat},${long}&sensor=false&key=${apiKeyGM}`;
     
     // Rest of code
}

Look at the example of the code I just posted for the other guy.

You need to initialize your state first - in the constructor for a standard class component, and first in a functional component with hooks - and I strongly recommend you supply a default value even if it�s just null.

The problem you�re having is a misunderstanding of the lifecycle methods. The method didComponentMount fires after the component has mounted and a full render has already completed.

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

The implication of this is that your variables are referenced before you�ve populated them via this method. That�s why it�s critical to initialize them in the constructor (the only step that happens before the initial render) and supply a sensible default value.

Also as Robert mentioned your api calls are asynchronous - code below them will not wait to fire. The typical pattern is to run setState in the promise resolution, which then triggers a rerender.

One last tip is that if you initialize your lat / long to null, you can return a blank node or a loading indicator in the render method.

Hope that helps.

# ? Apr 14, 2019 14:51

cubicle gangster: Jun 26, 2005; magda, make the tea

I have an odd question - has anyone here dealt with bottom feeding lawyers suing them for having not made an ADA compliant website?

One of our clients got served, so they in turn served us, so the original lawyer saw this & dug through our past work and has now served every one of our clients live websites. It's probably going to turn into a huge mess.
Websites aren't our bread and butter, we create marketing materials and the website is just a dumping ground for the sales content.

We are speaking with our own lawyers, but I'm more interested in if this has happened to any of you, and what you guys do. And if anyone was even making ADA compliant websites and we just missed the memo.

# ? Apr 14, 2019 15:29

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

cubicle gangster posted:

I have an odd question - has anyone here dealt with bottom feeding lawyers suing them for having not made an ADA compliant website?

One of our clients got served, so they in turn served us, so the original lawyer saw this & dug through our past work and has now served every one of our clients live websites. It's probably going to turn into a huge mess.
Websites aren't our bread and butter, we create marketing materials and the website is just a dumping ground for the sales content.

We are speaking with our own lawyers, but I'm more interested in if this has happened to any of you, and what you guys do. And if anyone was even making ADA compliant websites and we just missed the memo.

Yeah and sites getting sued is becoming more of a "thing" lately. I guess since it's often cheaper/easier to settle than to build out (and maintain!!) the site to be ADA compliant, lawyers have realized it's easy money.

# ? Apr 14, 2019 15:32

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

cubicle gangster posted:

I have an odd question - has anyone here dealt with bottom feeding lawyers suing them for having not made an ADA compliant website?

One of our clients got served, so they in turn served us, so the original lawyer saw this & dug through our past work and has now served every one of our clients live websites. It's probably going to turn into a huge mess.
Websites aren't our bread and butter, we create marketing materials and the website is just a dumping ground for the sales content.

We are speaking with our own lawyers, but I'm more interested in if this has happened to any of you, and what you guys do. And if anyone was even making ADA compliant websites and we just missed the memo.

I'm kind of worried about that also. The company I do the most work for had a client come to them requesting a website, but they needed it to be ADA compliant, so I had to research it. Turns out there's no real concrete written law on ADA compliance, it's real murky and most things are just guidelines. Strictly speaking you need to have all links the ugly default web colors (or very close) and all text needs to have a certain contrast ratio or better to the background, which means if your background isn't #ffffff or close, the contrast ratio is off. It also requires testing with accessibility tools, but only someone who uses those tools all the time can accurately test a site with them. Of course I'm not an expert on this stuff, this is just from a bit of research.

# ? Apr 14, 2019 15:58

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

I'm having my first go at a full stack (node, express, react, mongodb) application. I normally do front end only. There's something I'm not fully understanding that I hope you guys can set me straight on. Say I have an API endpoint at /api/users. My app talks to this endpoint via AJAX to load pertinent info. At any point in the app I need to be able to send a GET request to /api/users and get what I need. BUT I don't want people to be able to access /api/users directly (navigating to it in their browser, Postman, etc). Is there a technique to secure the endpoint while authenticating the app itself? I can't wrap my head around it since it would invariably require storing the JWT token somewhere client-facing which is obviously not secure.

# ? Apr 15, 2019 03:23

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Well, you might be giving web security too much credit actually. Any publicly accessible endpoint is by definition open to use by anyone with the right credentials. And you have to store some kind of secure credential on the client, otherwise there is no way for them to identify and authenticate themselves. Yes, that is a risk, but it is mitigated by using expiring tokens, HTTPS, secure HTTP cookies, CORS policies, browser security features, issuing API keys, etc.

If your question is "how do I let a client access my API without them having all the information necessary to do it themselves independently" then I think the answer is "you really can't". But, you can allow only same-origin request, issue session tokens with short expirations, use HTTPS, etc. Unless someone has a fantastic incentive to try and break your system, best practices should be good enough.

I'm no backend/security expert though so take my opinion with a grain of salt.

# ? Apr 15, 2019 03:35

prom candy: Dec 16, 2005; Only I may dance

You can't "trust" your client-side app any more than you can trust requests from Postman or anywhere else. There are lots of different ways to Auth individual users with a set up like this, JWT in a cookie is popular, using local storage and sending a token via headers with each request is another. I would probably just use auth0 if I was starting a new project today.

# ? Apr 15, 2019 03:42

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

I'm starting to realize I probably need to separate my "users" data into two separate groups: publicly accessible data that the app needs to function (avatars, usernames, etc), and private data like emails and passwords that only authenticated users can access their own.

# ? Apr 15, 2019 03:46

prom candy: Dec 16, 2005; Only I may dance

No one should ever be able to access their own password, definitely don't store passwords in plain text.

# ? Apr 15, 2019 04:07

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Maybe they meant setting a password rather than reading but yeah, never ever store plaintext passwords or let the user read their own password, it should be a write-only operation only.

A common pattern for APIs though is to have some actions that anyone can take simply by hitting the right API endpoint (e.g. GET a blog post based on its id or date) and some actions that require authentication (e.g. PUT a new blog post for a user). You probably don't want all your actions to require authentication.

# ? Apr 15, 2019 05:01

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Ruggan posted:

Don't clutter up your import with React and { Component }, just write out React.Component for your class.

I looked at the API results. You should initialize state.cardname to an empty array, not an empty object (cardname: []). I'd also rename it to cardNames to make it a little more clear it's an array.

On the results of the API call, do your setState operation but set cardNames to the data property of the resulting object. I'd just rename the arrow input to x and set it to x.data.

Lastly, as others mentioned, just use an arrow function for the implicit return and make sure to set a key on any iterated loop. Make sure you're accessing the right property of your state (data doesn't exist, you called this cardname or cardNames if you listened to me above). You also don't care about the index of the loop so don't take that input from the map.

Here's a codesandbox demonstrating: https://codesandbox.io/s/x391w2o69w

Same example using hooks: https://codesandbox.io/s/k3nmmk2zqo

This is the code I came up with to get it to work:

code:

import React from 'react';

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      cardname: []
    }
  }

  componentDidMount() {
    fetch("https://api.scryfall.com/catalog/card-names")
      .then(response => response.json())
      .then(data => {
        this.setState({
          cardname: data
        })
     })
  }

  render() {
      //return(<span>{this.state.cardname.data}</span>)
  
      if (this.state.cardname.data && this.state.cardname.data.length > 0) {
        return(
          <ul>
            {this.state.cardname.data.map(function(object, index) {
              return <li>{object}</li>
            })}
          </ul>
        )
      } else {
        return null
      }
  }
}

export default App;

create-react-app does that import React, { Component } from 'react' line in App.js, so I just left it there. Now I see why it just clutters up the code though. Thanks for the example with hooks and arrow functions, that's exactly what I needed and I'm going to study that one to see how it works because I'm not 100% clear on all the syntax yet.

# ? Apr 15, 2019 13:59

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 05:08

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

prom candy posted:

No one should ever be able to access their own password, definitely don't store passwords in plain text.

Yeah I know. They're hashed.

# ? Apr 15, 2019 15:55

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »