Question 215237 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to pass functions to div of buttons and make button with one of functions React

I have App file where i have function to filter list and i every section of the page on components on components. So i want to pass showActive, showAll and other functions to TaskControl to Button and assign to onClick. Problem is I cant pass multiple functions to Button and assign to each button.

App (){
const showActive = () => {
    const temp = todos.filter(todo => todo.isComplete == false)
    setNewCopy([...temp])

    console.log(temp)
  }

  const showAll = () => { 
    setNewCopy([...todos])
  }
return (
    <div className='page' >
      <div className="container">
        <Tasks tasks={todosCopy} onDelete={onDelete} onComplete={onComplete}/>
        <TaskControl tasks={todos} showActive={showActive} showAll={ showAll} />
        
        <p className='hint'>Drag and drop to reorder list</p>
      </div>

    </div>
  )
}

TaskControl file

const TaskControl = ({ tasks, showActive, showAll}) => {

    return (
            <div className="task-filter">
                <Button color='task-control-filter'  text='All' showAll={ showAll}/>
                <Button color='task-control-filter' showActive={ showActive} text='Active' />
                <Button color = 'task-control-filter' text='Completed' />
            </div>

            <Button color = 'task-control-clear' text= 'Clear Completed'/>
        </div>
    )
}

Button file

const Button = ({ text, color, showActive, showAll }) => {
    return (
        <button className={`btn ${color}`} onClick={() => {
            showActive()
            showAll()
        }}> 
            {text}
        </button>
    )
}

I’m thinking to add id to each Button, but i don’t know how use in inside Button file.

Tags:

2

Answers


  1. 0

    I think you can use text to help you to figure it out which button is.

    const onClick = (text) =>{
  if(text === 'Active'){
   showActive()
  }else if(text === 'All'){
   showAll()
  }
}
const Button = ({ text, color, showActive, showAll }) => {
    return (
        <button className={`btn ${color}`} onClick={() => onClick(text)}> 
            {text}
        </button>
    )
}
    Login or Signup to reply.
  2. 0

    There is no need to do any conditional rendering as suggested by aubrey1217. The answer is to pass a function as an onClick into your button component, and use that.

    The parent component (TaskControl) will be in charge of deciding which function to pass (because presumably, the parent component knows what each button should do).

    So
    TaskControl is:

    const TaskControl = ({ tasks, showActive, showAll}) => {

    return (
            <div className="task-filter">
                <Button color='task-control-filter'  text='All' onClick={ showAll}/>
                <Button color='task-control-filter' onClick={ showActive} text='Active' />
                <Button color = 'task-control-filter' text='Completed' />
            </div>

            <Button color = 'task-control-clear' text= 'Clear Completed'/>
        </div>
    )
}

    And Button:

    const Button = ({ text, color, onClick }) => {
    return (
        <button className={`btn ${color}`} onClick={onClick}> 
            {text}
        </button>
    )
}

    Much simpler and easy to read! Now the button will just call whatever function was passed to it. If you need to add a new button with a new function, then you can just specify a new onClick.

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

Back To Top
Search