Pass multiple data from child to parent in React

Question

I have made a bit more complex To Do list - with a Deadline / Calendar component.

I am able to pass data from the Todo child component to the TodoList Parent, but only the input. I am not able to pass also the Calendar (DeadlineList) data to the parent as well.

PARENT TodoList.js

import React from 'react'; 
import Todo from './Todo';
import DeadlineList from './DeadlineList';

const TodoList = ({ todos, toggleTodo}) => (
    
    <table>
           <tbody>
        <tr>
            <th className='taskTH'>TASK</th>
            <th className='deadlineTH'>DEADLINE</th>
            </tr>
            
            <tr>
            <td className='taskTD'>
                {todos.map(todo => ( 
                    <Todo
                       
                key={todo.id}
                text={todo.text}
                completed={todo.completed}
                toggleTodoItem={() => toggleTodo(todo.id)} />
        )    )}
</td>
            <td
            className="deadlineTd"
            >   {todos.map(todo => ( 

            <DeadlineList
                key={todo.id}
                text={todo.startDate}
                completed={todo.completed}
                onClick={() => toggleTodo(todo.id)} />
        )    )}</td>
        </tr>

   </tbody>
</table>

)

export default TodoList;

CHILD Todo.js - working

import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'

const Todo = (props) => { 

    const { toggleTodoItem, completed, text } = props;

    let [ shouldPlaySound, setShouldPlaySound ] = useState(true);

    function wooHooEverySecondClick() {
        if (shouldPlaySound) {   
            wooHooSound.play();
            setShouldPlaySound(false);
        } else {
            setShouldPlaySound(true);
        }
    }

    return (
        <li className="bananaLi"
            onClick={() => {
                toggleTodoItem();
                wooHooEverySecondClick();
            }}
            style={{
                textDecoration: completed ? 'line-through' : 'none'
            }}
        > 
            {text}
 
        </li>
    );
};

export default Todo;

CHILD DeadlineList.js - not passing data

import React from 'react';

const DeadlineList = ({ onClick, completed, value }) => (
    
    
     
    <li className="deadlineLi"
        onClick={onClick}
        style={{
            textDecoration: completed ? 'line-through' : 'none'
        }}
     >
 
       {value}

    </li>
);


export default DeadlineList;

Can you add your code here?

Shubham Verma
– Shubham Verma

2020-09-09 07:37:57 +00:00
Commented Sep 9, 2020 at 7:37 — Shubham Verma
– Shubham Verma, Commented Sep 9, 2020 at 7:37
the Repo is here: github.com/FilipZafran/…

FilipZafran
– FilipZafran

2020-09-09 07:53:32 +00:00
Commented Sep 9, 2020 at 7:53 — FilipZafran
– FilipZafran, Commented Sep 9, 2020 at 7:53
im not sure I know how to add the code to Fiddle :/

FilipZafran
– FilipZafran

2020-09-09 07:54:50 +00:00
Commented Sep 9, 2020 at 7:54 — FilipZafran
– FilipZafran, Commented Sep 9, 2020 at 7:54
OK, managed to put it on Sandbox

FilipZafran
– FilipZafran

2020-09-09 08:23:38 +00:00
Commented Sep 9, 2020 at 8:23 — FilipZafran
– FilipZafran, Commented Sep 9, 2020 at 8:23
I already updated my answer can you check again?

Shubham Verma
– Shubham Verma

2020-09-09 08:30:30 +00:00
Commented Sep 9, 2020 at 8:30 — Shubham Verma
– Shubham Verma, Commented Sep 9, 2020 at 8:30

Shubham Verma · Accepted Answer · 2020-09-09 08:12:02Z

2

I see I checked your code there is minor mistake it:

<DeadlineList
                key={todo.id}
                text={todo.startDate}
                completed={todo.completed}
                onClick={() => toggleTodo(todo.id)} />

DeadlineList:

const DeadlineList = ({ onClick, completed, value }) => (
  <li
    className="deadlineLi"
    onClick={onClick}
    style={{
      textDecoration: completed ? "line-through" : "none",
    }}
  >
    {value}
  </li>
);

Mistakes:

In DeadlineList component you are expecting value as a props but in you are not sending from TodoList component
Your todo does not have startDate it has date

Solution:

Update your props in TodoList and DeadlineList

<DeadlineList
                    key={todo.id}
                    value={todo.date}
                    completed={todo.completed}
                    onClick={() => toggleTodo(todo.id)}
                  />

and inside DeadlineList component:

const DeadlineList = ({ onClick, completed, value }) => {
  return (
    <li
      className="deadlineLi"
      onClick={onClick}
      style={{
        textDecoration: completed ? "line-through" : "none"
      }}
    >
      {new Intl.DateTimeFormat("en-US").format(value)}
    </li>
  );
};

Here is your code demo: https://codesandbox.io/s/clever-stonebraker-mpv3r?file=/src/components/DeadlineList.js:28-320

answered Sep 9, 2020 at 8:12

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

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

3 Comments

FilipZafran Over a year ago

thanks for the help, although this formula passes only todays date to all tasks/todos. Not dynamicaly

Shubham Verma Over a year ago

No I can see the date you selected for todo. Is displaying inside todolist

FilipZafran Over a year ago

true, it works in the codesandbox. not in my code. but I can work with this. thanks!!

Collectives™ on Stack Overflow

Pass multiple data from child to parent 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