2

I am trying to create a React App which should have two screens:

In the First Screen, the user can enter some input as a string and upon submitting it, the string should be passed on to Screen2

In Screen2, the entered text should be split and displayed as individual letters on a react bootstrap card.

The code which I have written for Screen1 is working perfectly and passing the string as intended to Screen2. However, the Screen2 is not displaying anything.

Code for App.js

export default function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route exact path="/Screen1" element={<Screen1 />} />
          <Route path="/Screen2/:text" component={Screen2} />
        </Routes>
      </div>
    </Router>
  )
}

This the code for Screen1.js

import React, { useState } from 'react'
import { Link } from 'react-router-dom'

export default function Screen1() {
  const [text, setText] = useState('')
  const [errorMsg, setErrorMsg] = useState('')

  const handleTextChange = (e) => {
    setText(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    if (text.trim() === '') {
      setErrorMsg('Please enter some text.')
      return
    }
    setText('')
  }

  return (
    <div className="info">
      <h2>Screen 1</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Enter text:
          <input
            type="text"
            value={text}
            onChange={handleTextChange}
          />
        </label>
        <Link to={`/Screen2/${text}`}>
          <button type="submit">Submit</button>
        </Link>
        {errorMsg && <p className="error">{errorMsg}</p>}
      </form>
      <Link to="/">Go back to home</Link>
    </div>
  )
}

This is the code for Screen2.js

import React from 'react'
import { useParams } from 'react-router-dom'
import Card from 'react-bootstrap/Card'

function Screen2() {
  const { text } = useParams() // extract the text from the URL
  const letters = text.split('') // convert text to array of characters

  return (
    <div className="info">
      <h2>Screen 2</h2>
      <Card style={{ width: '18rem' }}>
        <Card.Body>
          {letters.map((letter, index) => (
            <Card.Text key={index}>{letter}</Card.Text> // render each letter
          ))}
        </Card.Body>
      </Card>
    </div>
  )
}

export default Screen2

I tried making the card from react-bootstrap-documentation

Upon, inspecting and checking the console in Screen2, I got this error message:

Console Error

Matched leaf route at location "/Screen2/eavdsdvsfs" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
sadLife101
  • 37
  • 7
  • 1
    Please include all relevant code you are working with as part of a complete [mcve]. In this case it's the router and routes. We can't really address issues with code we can't see. – Drew Reese Mar 11 '23 at 08:13
  • @DrewReese Sorry, I added the routes from "App.js" – sadLife101 Mar 11 '23 at 08:20
  • @Miner Hi, I referred this and upon changing the "" to "", the "matched leaf" error is gone. But in its place, I got a new error: ```bundle.js:11850 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.``` – sadLife101 Mar 11 '23 at 08:30
  • 1
    The `` route should be `} />`. – Drew Reese Mar 11 '23 at 08:32
  • @DrewReese It's working perfectly. Thank you so much. I am beginner in this field, and you truly saved me a lot of worry. – sadLife101 Mar 11 '23 at 08:39
  • Sorry, I meant to also include that the duplicate provides a bit of explanation as well. Cheers. – Drew Reese Mar 11 '23 at 08:47
  • 1
    From what I understand you are using react-router/react-router-dom v6.x. The issue appears to be from the prop `component` you are using while routing to Screen2. Changing the prop to `element` and supplying an element like with other routes on App.js should solve the issue. Suggested fix: `} />` React Router v5 takes `component` prop to load a component when the route matches. React Router v6 does not support the `component` prop. It uses the `element` prop to load the element when the route matches. Hope this helps. – Phanisimha N R Mar 11 '23 at 08:56

0 Answers0