CODEWITHSUNDEEP
javascriptarraysreactjscomponents
Youssef Lotfi
Youssef Lotfi

Reputation: 43

How to pass props to components in React js

I'm working on a project with React JS , and I want to pass a props to an array , This is the Component :

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

class TaskItem extends Component {
  
  render() {
    const task = this.props.task;

    return (
        <tr>
          <Link to={`/tasks/${task.id}`}>
                {task.name}
          </Link>
        </tr>
    );
  }
}

export default TaskItem;

I want the value of {task.name} to be in the title of this array :

const todoDB = {
    todos  : [
        {
        //Proident tempor est nulla irure ad est
            'id'       : '561551bd7fe2ff461101c192',
            'title'    : ' ===> HERE <===' ,
            'notes'    : 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.',
            'startDate': new Date(2018, 8, 3),
            'dueDate'  : new Date(2018, 8, 5),
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'labels'   : [1]
        }
]

The array and the component are not in the same file I hope those information enough to understand my problem, THANKS

Upvotes: 0

Views: 288

Answers (2)

zahra shahrouzi
zahra shahrouzi

Reputation: 1012

you could convert the todoDB.todos array to a function ,pass the prop to the function and call it. sth like below:

const todoDB = {
  todos: (props) => [{
    'id': '561551bd7fe2ff461101c192',
    'title': props,
    'notes': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.',
    'startDate': new Date(2018, 8, 3),
    'dueDate': new Date(2018, 8, 5),
    'completed': false,
    'starred': false,
    'important': false,
    'deleted': false,
    'labels': [1]
  }]
}
console.log(todoDB.todos("this is the title")[0].title)

Upvotes: 2

Matt Brandt
Matt Brandt

Reputation: 599

I'm not entirely clear on your requirements but the following is a function that would generate an array of tasks in the format you provided.

const generateTodoDB = todos => ({
    todos: todos.map(todo => ({
        'id'       : '561551bd7fe2ff461101c192',
        'title'    : todo.title,
        'notes'    : 'Id nulla ...',
        'startDate': new Date(2018, 8, 3),
        'dueDate'  : new Date(2018, 8, 5),
        'completed': false,
        'starred'  : false,
        'important': false,
        'deleted'  : false,
        'labels'   : [1]
    })
})

Now you just have to call the generateTodoDB function passing in an array of todos.

const myTodos = [{ title: "Get Milk" }, { title: "Get Bananas" }];
const todoDB = generateTodoDB(myTodos);

generateTodoDB is a so called arrow function. It automatically returns the result of its function because it's body is wrapped in parenthathese. The same is happening here with todos.map.

const fn1 = () => ({ thisObject: "gets returned" })
const fn2 = () => { return { thisObjectDoes: "not return automatically" } }

Upvotes: 0

Related Questions