DEV Community

Discussion on: React not easy to learn?

View post

Replies for: Hey! First of all, everything is hard before it becomes easy. Don't get discouraged by initial setbacks ;-) About your code, React is perfectly f...

Collapse
 
cguttweb profile image
Chloe • • Edited

Ah ok so because I was trying to render it in the functional component that is why it was throwing the error with the objects array?

Collapse
 
tomekbuszewski profile image
Tomek Buszewski •

Not really, passing functions also work: codesandbox.io/s/twilight-frog-462...

Post your whole code for reference ;)

Thread Thread
 
cguttweb profile image
Chloe • • Edited

Ah ok so does it matter which way you approach? Is there such a thing as best practice in React?

import React from 'react'

let arrayMethods = [
    // array of objects here
]

let methodsList = arrayMethods.map((method) =>
 <li className="list-group-item" key={method.name}>
<strong>{method.name}</strong> {method.method}</li>
)

const Methods = () => {
    return (
        <div className="row">
          <div className="col-12 text-center">
            <input
            className="mb-3 p-2 align-center rounded"
            type="text"
            placeholder="Search for a method" />
      <form className="col-12 text-center">
        <input
          className="mb-3 p-2 rounded"
          id="methodname"
          placeholder="Method name"
          type="text"
        />
        <input
          className="p-2 rounded"
          id="method"
          placeholder="Enter method"
          type="text"
        />
        <input
          className="p-2 rounded"
          id="example"
          placeholder="Enter example"
          type="text"
        />
        <button className="btn btn-success" type="button">Add Method</button>
        <br />
      </form>
      </div>
      <div className="col-6">
      <ul className="list-group bg-danger">
          {methodsList}
      </ul>
    </div>
    {/* Textbox to show examples using methods */}
      <div className="col-6 pl-0">
        <textarea
          className="bg-dark col pt-3 text-white"
          name="exampleBox"
          id="exampleBox"
          rows="20"
        ></textarea>
      </div>
    </div>
    )
}

export default Methods
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
tomekbuszewski profile image
Tomek Buszewski •

Yes, using components is preferable. Your code renders fine: codesandbox.io/s/magical-smoke-gz6...