Question 264573 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React not showing component

Hello I am doing task app and when I click create button it shows me [object Object] instead of component

Here is App component file:

import React from 'react'
import Task from './Task.js'

function App() {
  function createTask(){
    const tasksList = document.querySelector(".tasksList")
    tasksList.append(<Task />)
  }
  return (
    <div className='app'>
      <div id='mainPanel'>
        <button onClick={createTask}>create</button>
      </div>
      <div className='tasksList'>

      </div>
    </div>
  )
}

export default App

Here is Task component file:

import React from 'react'

function Task() {
  return (
    <div>
        <input/>
        <button>delete</button>
    </div>
  )
}

export default Task
Tags:

2

Answers


  1. 0

    ReactJS uses what’s called a virtual DOM what this means in this case is that you can’t use a ReactNode (what gets returned from JSX expressions) as if it were an HTMLElement. The correct way to do this is as follows:

    import {useState} from "react";
function App() {
  function createTask(){
    setTasks(tasks.concat({properties: "describing the task"});
  }
  const [tasks, setTasks] = useState([]);

  return (
    <div className='app'>
      <div id='mainPanel'>
        <button onClick={createTask}>create</button>
      </div>
      <div className='tasksList'>
        {tasks.map(task => <Task task={task} />)}
      </div>
    </div>
  )
}

    basically create some state and instead of trying to manipulate the dom directly, update the state.

    As a side note, the code you had above could work in frameworks without a virtual DOM, for instance here is it working in SolidJS but even then I wouldn’t recommend this approach because it is going to be difficult to keep track of your state and mostly defeats the point of using a declarative framework.

    Login or Signup to reply.
  2. 0

    the problem is that you’re trying to insert a JSX component into the DOM but this is impossible.

    If you’re objective is to have a list of tasks and have a button to add a task into the list you can use the code below.

    This code contains a react state, which is an array of tasks. By default, this array is empty.

    When you click on the button to add a task, we use the setState function to add an object in the array ({name: "New task"}).

    And then in the code, to render all the tasks that are in the array, we just map the tasks.

        import React, {useState} from 'react'

    function Task() {
      return (
        <div className="Task">
          <input />
          <button>Delete</button>
        </div>
      );
    }

    function App() {
      const [tasks, setTasks] = useState([]);

      function createTask() {
        setTasks(prevState => ([
          ...prevState,
          {name: "New task"}
        ]);
      }

      return (
        <div className="app">
          <div id="mainPanel">
            <button onClick={createTask}>create</button>
          </div>
          {tasks?.length
            ? <div className="tasksList">
                {tasks.map((task, index) => (
                  <Task key={index} />
                )}
              </div>
            : null
          }
        </div>
      )
    }

    export default App
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search