Rendering an array of data in React

Question

I am trying to render some filtered xml data into a web page. The data is in an array and is pictured below.

This is my code at the minute but I am very lost. I have tried many different variation but they all seem to result in:

either not rendering anything to the webpage
a error stating that resValue "cannot be used as a child" or something along those lines.

Currently this code doesn't bring up any faults - it just doesn't render the array.

I am new to React and web development in general.

Any help would be greatly appreciated. Thanks.

export default function Home() {
  // State to store value from the input field
  const [resValue, setResVal] = useState("");

  // Input Field handler
  function handleRes(event) {
    setResVal((resValue) => event);
    console.log(resValue);
    return (
      <div>
        <ul>
          {resValue.map((item) => {
            return <li>{item}</li>;
          })}
        </ul>
      </div>
    );
  }

  // State to store value from the input field
  const [inputValue, setInputValue] = useState("");

  // Input Field handler
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // Reset Input Field handler
  const resetInputField = () => {
    setInputValue("");
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      <div className="InsideContent">
        <Button1 onClick={() => handleRes(loadPoBXml(inputValue))}>
          Confirm
        </Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>
    </>
  );
}

EDIT: Phil has said that to properly fix this I need to make my loadPoBData method synchronous. So here it is I also added my decodePoBString method too.

function loadPoBXml(str) {
var res = decodePoBString(str)
var xml = new XMLParser().parseFromString(res);   
let gem = (xml.getElementsByTagName('Gem'));
let item = (xml.getElementsByTagName('Item'))
return gem}

function decodePoBString(str) {
return inflateSync(new Buffer(str, "base64")).toString()

That doesn't look like XML. Looks more like a plan JS array of objects — Phil
– Phil, Commented Jul 1, 2022 at 5:15
Its possible it gets converted from xml to a js array. The starting data for that array is from a xml document. — Bigred
– Bigred, Commented Jul 1, 2022 at 5:18
I think the point Phil was making is that by alluding to XML in your question we expect it to be _about XML. XML is a "red herring". This is about how to render JSON. — Andy
– Andy, Commented Jul 1, 2022 at 6:33
Ahh i see apologies, like I said i'm very new to react and js. — Bigred
– Bigred, Commented Jul 1, 2022 at 6:38

Phil · Accepted Answer · 2022-07-01 05:34:53Z

1

The main issue is that you're trying to render something in the return value for an event handler. This won't work because any return value is ignored / discarded.

Rendering should be done in the return value of your component. Assuming loadPoBXml() is synchronous, all you need to do is have it set your resValue state and map over it in your JSX.

export default function Home() {
  // If resValue is meant to be an array, initialise it as one
  const [resValue, setResVal] = useState([]);
  const [inputValue, setInputValue] = useState("");

  // Confirm button click handler
  const handleClick = () => {
    setResVal(loadPoBXml(inputValue));
  };

  // Input Field handler
  const handleUserInput = (e) => {
    setInputValue(e.target.value);
  };

  // Reset Input Field handler
  const resetInputField = () => {
    setInputValue("");
  };

  return (
    <>
      <div className="InsideContent">
        <Input
          className="input1"
          placeholder="Paste PoB Code"
          name="pobCode"
          value={inputValue}
          onChange={handleUserInput}
        />
      </div>

      {/* assuming you want to render resValue here */}
      {resValue.length > 0 && (
        <div>
          <ul>
            {resValue.map((item, i) => (
              <li key={`item${i}`}>{item.name}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="InsideContent">
        <Button1 onClick={handleClick}>Confirm</Button1>
        <Button2 onClick={resetInputField}>Reset</Button2>
      </div>
    </>
  );
}

answered Jul 1, 2022 at 5:34

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bigred Over a year ago

Thanks Phil, Is making something synchronous as simple as adding a async tag to the function?

Phil Over a year ago

@Bigred absolutely not. If loadPoBXml is asynchronous, please edit your question to include the details and I'll attempt to address it in my answer

Bigred Over a year ago

Thanks Phil. I'm not sure I've done it all correctly but it certainly worked.

Collectives™ on Stack Overflow

Rendering an array of data in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related