code:-
<div>
{ChannelName.map((val, index) => {
return (
<div className="TextLink" key={index}>
<NavLink to={`/`}
onClick={(e) => myClick(val, index)} >
<button className='notActive buttonLeft'
onClick={() => { handleOnClick(index); handleClick(val, index); setPage("Table") }} // pass the index
className={activeIndex === index ? "active" : "notActive"}>
{val}
</button>
</NavLink>
</div>
)
})
}
</div>
{page === "Table" ? <Table val={getname}/> : null}
2 component table url:-
const userId = props.val;
useEffect(() => {
setInterval(() => {
getData();
}, 300);
}, [userId]);
const getData = () => {
console.log(`inside${userId}`);
axios.get(`${API_ENDPOINT}/api/getPlaylist?RDL=${menuId}`, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-control-allow-origin': '*'
},
auth: {
username: 'admin',
password: 'password'
}
}).then(response => {
setIsLoading(true);
setPlaylistData(response.data.Clips);
setChannel([(response.data.Players)]);
// console.log("table", response.data.Clips);
//console.log([...Object.values(response.data.Players).flat()]);
}).catch(error => {
console.log("Error In GET Data", error);
});
I want when I click the menu then menu URL parameters goes to the menuId and then the api show according then
Right now i am props the the onclick name and when i click on the second button its show me new api and 1 menu api
how can i fix that?
Related
In React.js,
The name of the room assigned to each home appliance
is got from the backend and displayed
I am trying to check the room to which the home appliance belongs with a radio button.
What I want to achieve is
I want to check (reflect on) the radio button that matches the room name assigned to each home appliance.
Issue/error message
Nowhere is checked like a photograph below.
in DropDownForRoomChangeButton.js
Since I can confirm that the contents are properly contained with console.log(item.item.room_name)
I wonder why it wasn't checked.
DiscoverCondoRoom.js
const DiscoverCondoRoom = () => {
const [devices, setDevices] = useState([]);
const getDevices = async(data) => {
await axios.get('xxx.com',
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${cookies.get('accesstoken')}`
},
})
.then(result => {
console.log(result.data)
setDevices(result.data.attributes);
})
.catch(err => {
console.log(err);
});
}
useEffect(() => {
getDevices();
},[]);
const keys = [
"camera",
"climate",
"cover",
"light",
"lock",
"sensor",
"switch",
];
const entities = keys
.map((key) => (devices[key] || []).map((e) => ({ ...e, key })))
.flat();
return (
<>
<div className="row mx-auto text-center">
{entities.map((entity, i) => (
<div className="">
<DropDownForRoomChangeBotton item={entity} />
</div>
</div>
}
</>
);
}
export default DiscoverCondoRoom;
DropDownForRoomChangeButton.js
import Dropdown from 'react-bootstrap/Dropdown';
const cookies = new Cookies();
const DropDownForRoomChangeButton = (item) => {
const [devices, setDevices] = useState([]);
const getDevices = async(data) => {
await axios.get('xxx.com',
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${cookies.get('accesstoken')}`
},
})
.then(result => {
console.log(result.data)
setDevices(result.data.attributes);
})
.catch(err => {
console.log(err);
});
}
const keys = [
"camera",
"climate",
"cover",
"light",
"lock",
"sensor",
"switch",
];
const entities = keys
.map((key) => (devices[key] || []).map((e) => ({ ...e, key })))
.flat();
const roomNames = [...new Set(entities.map((entity) => entity.room_name))];
const [val, setVal] = useState();
console.log(val)
const HomeHandleChange = e => setVal(e.target.value);
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
<button className="btn btn-primary button_table_rightside">Unassigned</button>
</a>
));
useEffect(() => {
getDevices();
setVal(item.item.room_nam)
},[]);
console.log(roomNames)
console.log(item)
console.log(item.item.room_name)
return (
<>
<Dropdown className="room_change_dropdown_top">
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />
<Dropdown.Menu className="room_change_dropdown">
<Dropdown.Item className="room_change_dropdown_item">
{roomNames.map((room_names, i) => (
<div className="flex_radio">
<input
className="room_change_radio"
type="radio"
value={room_names}
onChange={HomeHandleChange}
checked={val === item.item.room_name}
/>
<p className="drop_down_p">{room_names}</p>
</div>
))}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
export default DropDownForRoomChangeButton;
HTML code
Based on your comment, I think you were going for something like this:
const homeHandleChange = e => setVal(e.target.name);
<input
...
name={item.item.room_name}
onChange={homeHandleChange}
checked={val === item.item.room_name}
/>
This way you set the state with the actual name of the room, not value, which in this case is meaningless.
Also, you don't need the useEffect for setting the initial state.
useState accepts a parameter for a default value.
So you can simply do:
const [val, setVal] = useState(item.item.room_name);
And then you can remove that line from the useEffect.
Note: Regular function, (unlike components / etc..), should be named in camel-case, not Pascal-case.
So HomeHandleChange, should actually be homeHandleChange like in the example above.
Obviously you can do whatever you choose but it's a matter of basic convention that's worth following IMO.
i want to pass input value to function in react but i cant send value here is my code
{users.map((user) => (
<TableCell align='right'>
<TextField
select
sx={{ minWidth: 120 }}
value={user.status !== null ? user.status : 'waiting'}
onChange={() => changeUserStatus(user.id, user.status, this)}
>
<MenuItem
value={"approved"}
>
Approve
</MenuItem>
<MenuItem
value={"rejected"}
>
Reject
</MenuItem>
<MenuItem
value={"waiting"}
>
Waiting
</MenuItem>
</TextField>
</TableCell>
);
))}
And function
const changeUserStatus = async (userId, oldStatus) => {
let newStatus;
// i need new status coming from input value
if(oldStatus === 'approved') {
newStatus = 'rejected';
} else {
newStatus = 'approved';
}
const request = await fetch(`xx.com/api`, {
method: 'POST',
headers : { 'Content-Type': 'application/json' },
body: JSON.stringify({ user_id: userId.toString(), status: newStatus}),
}).then(response => {
updateUsers()
})
.catch(err => console.error("Change Status Error", err))
}
i know a way to do it but, Im using map function to read data
I'm trying to delete a user dependents by dependents id using react-confirm-alert dialog but the list refreshes, how do I stop this from happening?
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';
//Api data sample
"Details": [
{
"name": "test test",
"gender" "M"
"dependents": [
{
"blood_group": "A+",
"date_of_birth": "1990-08-10",
"gender": "Female",
"genotype": "AS",
"id": "621f191dcd7fe69a6a3b7",
}
],
},
]
function App() {
const [formalDetails, setFormalDetails] = useState([]);
//get formal details API call
const handleDelete = (detail) => {
const params = JSON.stringify({
"principal enrid": detail.principals_enrid,
"dependent id": detail.id,
mine: true,
});
Axios({
method: "POST",
url: "api",
headers: {
"Content-Type": "application/json",
},
data: params,
})
.then((response) => {
console.log(response.status);
//below is where my proble lies
setFormalDetails((current) =>
current.filter((dep) => {
return dep?.dependents?.id !== detail?.dependents?.id;
})
);
})
.catch(function (error) {
console.log(error);
});
};
const submit = (user) => {
confirmAlert({
title: 'Confirm to delete Dependent',
message: `Are you sure you want to delete ${user?.name}?`,
buttons: [
{
label: 'Yes',
onClick: () => handleRemove(user)
},
{
label: 'No',
onClick: () => null
}
]
});
}
return (
<div className="app">
{formalDetails.length === 0 ? (<p>No Data</p>) : (
formalDetails?.map((record, idx) => {
return (
<div key={idx}>
<p >{record.name}</p>
<p >{record.gender}</p>
{
record?.dependents?.map((user, indx) => {
return (
<div key={indx}>
<p >{user.name}</P>
<button
onClick={() => submit(user)}
type="button">
Delete
</button
</div
)
}}
</div>
)
)}
</div>
);
}
export default App;
Please how do can I delete a dependent by ID without refreshing the list/page/window to keep the user scrolling down to take more action(s) even after performing a delete action.
code:-
useEffect(() => {
setPlayer();
window.addEventListener("keydown", handleKeyDown);
return function cleanup() {
window.removeEventListener("keydown", handleKeyDown);
};
}, [props])
const handleKeyDown = (event, ID) => {
if (event.key === "Delete") {
//alert(name);
axios({
method: 'post',
url: `${API_ENDPOINT}/api/setCue?Idx=${ID}&RDL=${props.val}`,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-control-allow-origin': '*'
},
auth: {
username: 'admin',
password: 'password'
},
}).then(response => {
console.log("Delete Inside Axios");
}).catch(error => {
console.log("Error In Post Data", error);
});
console.log("Delete Key Press", ID, props.val);
}
}
<tbody>
{
PlaylistData && PlaylistData.map((playdata) => {
return (
<tr key={playdata.idx} tabIndex={playdata.idx} className="border_bottom"
KeyDown={(e) => handleKeyDown(e, playdata.idx)} onLoad={() => active(playdata.idx)}
>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
</td>
when I click the delete button it does not send the table index but when I remove the window.addEventListener("keydown", handleKeyDown); its sending the id number but not the props values
I want both id and props values to print in the console.
How can I fix that?
please help.
You can get the value of target using event.code == "Delete". So replace event.key by event.code
You can see the example below to see how it works i.e. go to input and then press any key to see the key entered.
const input = document.querySelector('input');
const log = document.getElementById('log');
input.onkeydown = logKey;
function logKey(e) {
log.textContent += ` ${e.code}, `;
}
<input>
<h3 id="log"></h3>
I'm using react table (https://github.com/react-tools/react-table) to render a table of expenses. In one column, there should be a button to 'approve' the expense. This is handled like so:
const columns = [
{
Header: "Description",
accessor: "description"
},
{
Header: "Approve",
accessor: d => {
return <button onClick={this.approveExpense(d.id)}>Approve</button>;
},
id: "approved"
}
];
Where the approveExpense function is defined as:
approveExpense = id => {
fetch(`${apiRoot}expenses_pending/`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Token ${this.props.auth.token}`
},
body: JSON.stringify({
id: id
})
}).then(res => {
if (res.status === 200) {
this.setState({
issues: this.state.expenses.filter(expense => expense.id != id)
});
} else {
console.log("Error");
}
});
};
Strangely, however, when the page loads, it behaves as if all of these buttons are being repeatedly pressed, many times per second (until the fans start going crazy and I stop the react server).
Am I doing something stupid?
Full class:
class ExpensePendingAdmin extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
fetch(`${apiRoot}expenses_pending`, {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Token ${this.props.auth.token}`
}
})
.then(response => response.json())
.then(data => {
console.log(data);
this.setState({
expenses: data
});
});
}
approveExpense = id => {
fetch(`${apiRoot}expenses_pending/`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Token ${this.props.auth.token}`
},
body: JSON.stringify({
id: id
})
}).then(res => {
if (res.status === 200) {
this.setState({
issues: this.state.expenses.filter(expense => expense.id != id)
});
} else {
console.log("Error");
}
});
};
render() {
const columns = [
{
Header: "Description",
accessor: "description"
},
{
Header: "Logged At",
id: "loggedAt",
accessor: d =>
moment(d.expense_incur_datetime).format("HH:mm - ddd d/M/YYYY")
},
{
Header: "Amount",
accessor: d => `£${d.amount}`,
id: "amount"
},
{
Header: "Approve",
accessor: d => {
return <button onClick={this.approveExpense(d.id)}>Approve</button>;
},
id: "approved"
},
{
Header: "Paid",
accessor: d => {
console.log(d);
return d.is_unpaid ? "No" : "Yes";
},
id: "paid"
}
];
return (
<div className="container-fluid">
{this.state.expenses ? (
<>
<div className="row">
<div className="col text-center">
<h2>Pending Expenses</h2>
</div>
</div>
<div className="row">
<div className="col">
<ReactTable
data={this.state.expenses}
columns={columns}
minRows="0"
minWidth="50"
showPagination={false}
/>
</div>
</div>
</>
) : (
"LOADING"
)}
</div>
);
}
}
Methods in event handlers in JSX do not require parentheses, if you want to pass down a parameter simply wrap it in a function:
onClick={() => this.approveExpense(d.id)}
All other answers are right, however you could also improve the syntax of your function calling by making your function will multiple parameter sets :
approveExpense = id => ev => {
And then setting your accessor rendering like this :
accessor: d => <button onClick={this.approveExpense(d.id)}>Approve</button>;
The function : this.approveExpense(d.id) will return another function capable of receiving another parameter (here, the click event names ev) and will work like a charm
You need to pass the approveExpense() function as a callback function like, so it will only trigger when you click.
<button onClick={(d) => this.approveExpense(d.id)}>Approve</button>
The problem with your code is that you are passing the event handler in the wrong way:
return <button onClick={this.approveExpense(d.id)}>Approve</button>;
by using directly this.approveExpense(d.id) inside your JSX code you are telling javascript to execute that function as soon as the interpreter reads it.
Instead you should proxy the function execution on the click, like this:
return <button onClick={(e) => {this.approveExpense(d.id)}}>Approve</button>;
For more in depth explanation on how to pass function to components in React you can check https://reactjs.org/docs/faq-functions.html