-2

Hi I made a loaded page but it's giving me an error and I'm not sure from what so I came here to ask if you know what caused it. Error message:

ERROR in src\components\pages\Bookings.js Line 24:12: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (24:12) Code:

import React, { Component } from "react";
//just initialised but will have to get rid of css later

function click() {
    window.onload = function(){
        if(document.getElementById("ArtsButt").onclick) {
            window.open("link 1");
        }
        if(document.getElementById("SciButt").onclick) {
            window.open("link 2");
        }
        if(document.getElementById("EveButt").onclick) {
            window.open("link 3");
        }
    }
}


class Bookings extends Component {
    render() {
        click();
        return (
            <button type="button" id="ArtsButt">Arts</button>
            <button type="button" id="SciButt">Sciences+Eng</button>
            <button type="button" id="EveButt">Evening</button>
        )
    }
}

export default Bookings;

If you know how to fix this please let me know and thanks

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
  • I have actual hyperlinks instead of links1-3 but I put them here for privacy – candpythonprogrammer May 03 '22 at 15:20
  • 1
    Please consider reading about fragments https://reactjs.org/docs/fragments.html – evolutionxbox May 03 '22 at 15:21
  • 2
    Also, please note that you should not be using ``s as stand-ins for `` elements-- this is an approach that not semantic and an accessibility antipattern. If you are clicking something solely to navigate to a different page/view/URL you want a link-- you can always style to look like a button with CSS if needed. – Alexander Nied May 03 '22 at 15:23
  • 2
    And you shouldn't really be mixing native JS DOM methods with React like that. – Andy May 03 '22 at 15:25
  • 2
    Also, as Andy points out, you are not using React correctly-- when using React you should _almost never_ be doing direct DOM manipulation. I'd recommend following the tutorials a bit more closely to get a sense of how and why to write idiomatic React and avoid antipatterns such as this. You're certainly not the first person to have made this mistake: [take a look at a similar comment I wrote just a month before you posted this](https://stackoverflow.com/questions/71732114/hi-all-am-creating-responsive-navbar-in-react-when-i-clicked-on-toggle-button-i#comment126768178_71732114). – Alexander Nied May 03 '22 at 15:29

1 Answers1

1

React component must return a single React Node, therefore your nodes must have a common single parent, you can wrap them with React.Fragment, for example:

<>
  <button type="button" id="ArtsButt">
    Arts
  </button>
  <button type="button" id="SciButt">
    Sciences+Eng
  </button>
  <button type="button" id="EveButt">
    Evening
  </button>
</>
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • I have changed that now it doesn't give me an error but when I click on the buttons it does not do anything. You have any idea why? I just need the buttons to open a new webpage – candpythonprogrammer May 03 '22 at 15:26
  • Well your code doesnt make any sense, you should go over some tutorial before working on React. – Dennis Vash May 03 '22 at 15:48